From c55adcb80c5c6bb07fbe65b2770c35980964b045 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Tue, 17 Oct 2017 10:38:11 +0800 Subject: [PATCH] update to 2.0.0-alpha.3 --- 2.0/{docs.a7c988a.css => docs.1b36400.css} | 2 +- 2.0/docs.428d642.js | 1 + 2.0/docs.5c45558.js | 4 -- 2.0/element-ui.88a41c1.js | 14 ----- 2.0/element-ui.ca7273e.js | 1 + 2.0/en-US.9a7fc56.js | 1 + 2.0/en-US.f005e1b.js | 68 ---------------------- 2.0/index.html | 6 +- 2.0/manifest.5fa3f93.js | 1 - 2.0/manifest.cd74cd3.js | 1 + 2.0/versions.json | 2 +- 2.0/zh-CN.69ae35d.js | 67 --------------------- 2.0/zh-CN.a8e4087.js | 1 + versions.json | 2 +- 14 files changed, 11 insertions(+), 160 deletions(-) rename 2.0/{docs.a7c988a.css => docs.1b36400.css} (56%) create mode 100644 2.0/docs.428d642.js delete mode 100644 2.0/docs.5c45558.js delete mode 100644 2.0/element-ui.88a41c1.js create mode 100644 2.0/element-ui.ca7273e.js create mode 100644 2.0/en-US.9a7fc56.js delete mode 100644 2.0/en-US.f005e1b.js delete mode 100644 2.0/manifest.5fa3f93.js create mode 100644 2.0/manifest.cd74cd3.js delete mode 100644 2.0/zh-CN.69ae35d.js create mode 100644 2.0/zh-CN.a8e4087.js diff --git a/2.0/docs.a7c988a.css b/2.0/docs.1b36400.css similarity index 56% rename from 2.0/docs.a7c988a.css rename to 2.0/docs.1b36400.css index 7b72c03ac..fa8929ada 100644 --- a/2.0/docs.a7c988a.css +++ b/2.0/docs.1b36400.css @@ -1 +1 @@ -.hljs{display:block;overflow-x:auto;padding:.5em;background:#fff}.hljs,.hljs-subst{color:#000}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:#756bb1}.hljs-comment,.hljs-quote{color:#636363}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp{color:#31a354}.hljs-deletion,.hljs-variable{color:#88f}.hljs-built_in,.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-tag,.hljs-title,.hljs-type{color:#3182bd}.hljs-emphasis{font-style:italic}.hljs-attribute{color:#e6550d}@font-face{font-family:icomoon;src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=);src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=#iefix) format("embedded-opentype"),url(data:application/x-font-ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBccAAAC8AAAAYGNtYXAXVtKKAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsdxmDoAAAF4AAAD1GhlYWQK1CI1AAAFTAAAADZoaGVhB8IDyQAABYQAAAAkaG10eBYAAAAAAAWoAAAAIGxvY2EDFAH+AAAFyAAAABJtYXhwAA4AbwAABdwAAAAgbmFtZZlKCfsAAAX8AAABhnBvc3QAAwAAAAAHhAAAACAAAwOaAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QP//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAFAAD/wAQAA8AAEwAnADUAQwBRAAATND4CMzIeAhUUDgIjIi4CJTQuAiMiDgIVFB4CMzI+AiU0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUBIgYVFBYzITI2NTQmIwBQi7tqaruLUFCLu2pqu4tQA7NEdp9aWp92RER2n1pan3ZE/XMeFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBEBwGq7i1BQi7tqaruLUFCLu2pan3ZERHafWlqfdkREdp/nFR4eFTMWHh4WMxUeHhUzFh4eFv8AGRERGRkRERkAAAAEAAD/wAQAA8AAEwAhAC8ATwAAASIOAhUUHgIzMj4CNTQuAgE0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUTJy4BIyIGDwEOASMiJjU0NjcnNz4BMzIWFx4BFRQGJwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR5EBCpaLzBbKgQBBQIQFQYGAQoyazU2aTMJChwTA8BQi7tqaruLUFCLu2pqu4tQ/o0VHh4VMxYeHhYzFR4eFTMWHh4W/psBFRUVFQEBARgRCA8GAwUYGhkaBRMMExoGAAAEAAD/wAQAA8AAEwAhAC8APQAABSIuAjU0PgIzMh4CFRQOAgEVFBYzMjY9ATQmIyIGBRUUFjMyNj0BNCYjIgYBIgYVFBYzITI2NTQmIwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBFAUIu7amq7i1BQi7tqaruLUAKNMxYeHhYzFR4eFTMWHh4WMxUeHv64GRERGRkRERkAAAQAAP/ABAADwAATAFAAXgBsAAABIg4CFRQeAjMyPgI1NC4CExQGFQ4BFQ4DIzgBMTgBMSIuAic0Jic0JjUuATU0Njc+ATMyFhcxHgEzMjY3MT4BMzIWFx4BFRQGBwM0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUCAGq7i1BQi7tqaruLUFCLu8cBAQEVP01bMjJbTT8VAQEBAQECAgUVDAwVBSB4S0t4IAUVDAwVBQICAQG+HhUWHh4WFR7+sx4WFR4eFRYeA8BQi7tqaruLUFCLu2pqu4tQ/XICAgEBAgEpQjAbGzBCKQECAQECAgIGAwUJBAsMDAs9TEw9CwwMCwQJBQMGAgEbFR4eFTMWHh4WMxUeHhUzFh4eFgAAAAEAAAAAAADYdr5rXw889QALBAAAAAAA09ru3AAAAADT2u7cAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAgEAAAAAAAAAAAAAAACAAAABAAAAAQAAAAEAAAABAAAAAAAAAAACgAUAB4AkAECAVoB6gAAAAEAAAAIAG0ABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype"),url(data:application/font-woff;base64,d09GRgABAAAAAAfwAAsAAAAAB6QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFx2NtYXAAAAFoAAAAVAAAAFQXVtKKZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAA9QAAAPUx3GYOmhlYWQAAAWYAAAANgAAADYK1CI1aGhlYQAABdAAAAAkAAAAJAfCA8lobXR4AAAF9AAAACAAAAAgFgAAAGxvY2EAAAYUAAAAEgAAABIDFAH+bWF4cAAABigAAAAgAAAAIAAOAG9uYW1lAAAGSAAAAYYAAAGGmUoJ+3Bvc3QAAAfQAAAAIAAAACAAAwAAAAMDmgGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QMDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkD//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAA/8AEAAPAABMAJwA1AEMAUQAAEzQ+AjMyHgIVFA4CIyIuAiU0LgIjIg4CFRQeAjMyPgIlNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1ASIGFRQWMyEyNjU0JiMAUIu7amq7i1BQi7tqaruLUAOzRHafWlqfdkREdp9aWp92RP1zHhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRAcBqu4tQUIu7amq7i1BQi7tqWp92RER2n1pan3ZERHaf5xUeHhUzFh4eFjMVHh4VMxYeHhb/ABkRERkZEREZAAAABAAA/8AEAAPAABMAIQAvAE8AAAEiDgIVFB4CMzI+AjU0LgIBNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1EycuASMiBg8BDgEjIiY1NDY3Jzc+ATMyFhceARUUBicCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUeRAQqWi8wWyoEAQUCEBUGBgEKMms1NmkzCQocEwPAUIu7amq7i1BQi7tqaruLUP6NFR4eFTMWHh4WMxUeHhUzFh4eFv6bARUVFRUBAQEYEQgPBgMFGBoZGgUTDBMaBgAABAAA/8AEAAPAABMAIQAvAD0AAAUiLgI1ND4CMzIeAhUUDgIBFRQWMzI2PQE0JiMiBgUVFBYzMjY9ATQmIyIGASIGFRQWMyEyNjU0JiMCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRQFCLu2pqu4tQUIu7amq7i1ACjTMWHh4WMxUeHhUzFh4eFjMVHh7+uBkRERkZEREZAAAEAAD/wAQAA8AAEwBQAF4AbAAAASIOAhUUHgIzMj4CNTQuAhMUBhUOARUOAyM4ATE4ATEiLgInNCYnNCY1LgE1NDY3PgEzMhYXMR4BMzI2NzE+ATMyFhceARUUBgcDNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1AgBqu4tQUIu7amq7i1BQi7vHAQEBFT9NWzIyW00/FQEBAQEBAgIFFQwMFQUgeEtLeCAFFQwMFQUCAgEBvh4VFh4eFhUe/rMeFhUeHhUWHgPAUIu7amq7i1BQi7tqaruLUP1yAgIBAQIBKUIwGxswQikBAgEBAgICBgMFCQQLDAwLPUxMPQsMDAsECQUDBgIBGxUeHhUzFh4eFjMVHh4VMxYeHhYAAAABAAAAAAAA2Ha+a18PPPUACwQAAAAAANPa7twAAAAA09ru3AAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAIBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAJABAgFaAeoAAAABAAAACABtAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff"),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE+R2VuZXJhdGVkIGJ5IEljb01vb248L21ldGFkYXRhPgo8ZGVmcz4KPGZvbnQgaWQ9Imljb21vb24iIGhvcml6LWFkdi14PSIxMDI0Ij4KPGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiIC8+CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSIxMDI0IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjA7IiBob3Jpei1hZHYteD0iNTEyIiBkPSIiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAwOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLW9mZiIgZD0iTTAgNDQ4YzAgMjgyLjc2NiAyMjkuMjM0IDUxMiA1MTIgNTEyczUxMi0yMjkuMjM0IDUxMi01MTJjMC0yODIuNzY2LTIyOS4yMzQtNTEyLTUxMi01MTJzLTUxMiAyMjkuMjM0LTUxMiA1MTJ6TTk0Ny4yIDQ0OGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMnMtNDM1LjItMTk0Ljg0OS00MzUuMi00MzUuMmMwLTI0MC4zNTEgMTk0Ljg0OS00MzUuMiA0MzUuMi00MzUuMnM0MzUuMiAxOTQuODQ5IDQzNS4yIDQzNS4yek0yOTQuNCA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNNjI3LjIgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTM2MS4xNDMgMjgxLjZjLTIyLjcxMSAwLTQxLjE0My0xOC42MzctNDEuMTQzLTQxLjZzMTguNDMyLTQxLjYgNDEuMTQzLTQxLjZoMzAxLjcxNGMyMi43MTEgMCA0MS4xNDMgMTguNjM3IDQxLjE0MyA0MS42cy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNmgtMzAxLjcxNHoiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAxOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTEiIGQ9Ik01MTIuMDAxIDk2MGMtMjgyLjc3MSAwLTUxMi4wMDEtMjI5LjIzLTUxMi4wMDEtNTEyLjAwMiAwLTI4Mi43NyAyMjkuMjMtNTExLjk5OCA1MTIuMDAxLTUxMS45OTggMjgyLjc2OSAwIDUxMS45OTkgMjI5LjIyNyA1MTEuOTk5IDUxMS45OThzLTIyOS4yMyA1MTIuMDAyLTUxMS45OTkgNTEyLjAwMnpNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTYyNy4yIDU4OC44NTNjMCAyOC4yNDcgMjIuNzI2IDUxLjE0NyA1MS4yIDUxLjE0NyAyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek02OTQuNTI5IDE4MS4xOTdsLTMuNDIyIDEuMjE2Yy01Ni4xNSAyNy44NzItMTE2LjM4OCA0Mi4wNDctMTc4Ljg4MiA0Mi4wNDctNjQuNTU2IDAtMTI1LjYxMS0xNC4zMTYtMTgxLjUxNS00Mi40NWwtMy4zODItMS4xMzJjLTIuMTAyLTAuNjI4LTQuOTQ1LTEuNTI5LTguNDg5LTEuNTI5LTIwLjU1NCAwLTM3LjIzOSAxOC4yOS0zNy4yMzkgNDAuNzM0IDAgMTAuNjU1IDQuNTcxIDIxLjM2MSAxMi4xMTQgMjkuMzk5bC0wLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAyOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTIiIGQ9Ik01MTItNjRjLTI4Mi43NjYgMC01MTIgMjI5LjIzNC01MTIgNTEyczIyOS4yMzQgNTEyIDUxMiA1MTJjMjgyLjc2NiAwIDUxMi0yMjkuMjM0IDUxMi01MTJzLTIyOS4yMzQtNTEyLTUxMi01MTJ6TTI5NC40IDU4OC44NTN2LTUxLjMwN2MwLTI4LjQ4MiAyMi45MjMtNTEuMTQ3IDUxLjItNTEuMTQ3IDI4LjQ3NCAwIDUxLjIgMjIuODk5IDUxLjIgNTEuMTQ3djUxLjMwN2MwIDI4LjQ4Mi0yMi45MjMgNTEuMTQ3LTUxLjIgNTEuMTQ3LTI4LjQ3NCAwLTUxLjItMjIuODk5LTUxLjItNTEuMTQ3ek02MjcuMiA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3pNMzYxLjE0MyAyODEuNmMtMjIuNzExIDAtNDEuMTQzLTE4LjYzNy00MS4xNDMtNDEuNnMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0YzIyLjcxMSAwIDQxLjE0MyAxOC42MzcgNDEuMTQzIDQxLjZzLTE4LjQzMiA0MS42LTQxLjE0MyA0MS42aC0zMDEuNzE0eiIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGU5MDM7IiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMyIgZD0iTTUxMi4wMDEgOTYwYy0yODIuNzcgMC01MTIuMDAxLTIyOS4yMy01MTIuMDAxLTUxMS45OTlzMjI5LjIzLTUxMi4wMDEgNTEyLjAwMS01MTIuMDAxYzI4Mi43NyAwIDUxMS45OTkgMjI5LjIzIDUxMS45OTkgNTExLjk5OXMtMjI5LjIyOSA1MTIuMDAxLTUxMS45OTkgNTEyLjAwMXpNODE3LjQ5NSAzMDUuNTY1Yy0wLjQ0NS0xLjQ4NS0wLjk2My0yLjkzOS0xLjU2OS00LjM1LTAuNjc2LTEuNTcyLTEuNDU1LTMuMDg5LTIuMzE3LTQuNTU2LTU1LjYzMS0xMDcuNjEzLTE2OS41MTgtMTgxLjQ1OS0zMDEuMzIzLTE4MS40NTktMC4wOTYgMC0wLjE5IDAuMDAyLTAuMjg2IDAuMDAycy0wLjE5LTAuMDAyLTAuMjg2LTAuMDAyYy0xMzEuODA0IDAtMjQ1LjY5MyA3My44NDUtMzAxLjMyMyAxODEuNDU5LTAuODYyIDEuNDY3LTEuNjQxIDIuOTg0LTIuMzE3IDQuNTU2LTAuNjA2IDEuNDEtMS4xMjQgMi44NjUtMS41NjkgNC4zNS0xLjEwMyAzLjY4LTEuNzA1IDcuNTY5LTEuNzA1IDExLjU5NyAwIDYuNTY2IDEuNTc5IDEyLjc3MSA0LjM3MiAxOC4yODIgNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWgwLjY3NmM0MS40MTEtODEuNDUzIDEyNy4xMzEtMTM3LjU0NCAyMjYuNTA3LTEzNy42NTIgOTkuMzc1IDAuMTA4IDE4NS4wOTUgNTYuMiAyMjYuNTA3IDEzNy42NTJoMC42NzZjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIzIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIyLTIyLjk1NWMyLjc5NC01LjUxMSA0LjM3Mi0xMS43MTUgNC4zNzItMTguMjgyIDAtNC4wMjktMC42MDItNy45MTgtMS43MDUtMTEuNTk3ek02MjcuMiA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6IiAvPgo8L2ZvbnQ+PC9kZWZzPjwvc3ZnPg==#icomoon) format("svg");font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-rate-face-off:before{content:"\E900"}.icon-rate-face-1:before{content:"\E901"}.icon-rate-face-2:before{content:"\E902"}.icon-rate-face-3:before{content:"\E903"}body,html{margin:0;padding:0;overflow-y:hidden}#app,body,html{height:100%}#app.is-component{overflow-y:hidden}#app.is-component .main-cnt{padding:0;margin-top:0;height:100%;min-height:auto}#app.is-component .headerWrapper{position:fixed;width:100%;left:0;top:0;z-index:1500}#app.is-component .headerWrapper .container{padding:0}body{font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;overflow:auto;font-weight:400;-webkit-font-smoothing:antialiased}a{color:#409eff;text-decoration:none}code{background-color:#f9fafc;padding:0 4px;border:1px solid #eaeefb;border-radius:4px}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}.hljs{line-height:1.8;font-family:Menlo,Monaco,Consolas,Courier,monospace;font-size:12px;padding:18px 24px;background-color:#fafafa;border:1px solid #eaeefb;margin-bottom:25px;border-radius:4px;-webkit-font-smoothing:auto}.main-cnt{margin-top:-80px;padding:80px 0 120px;box-sizing:border-box;min-height:100%}.container,.page-container{width:1140px;padding:0 30px;margin:0 auto}.page-container{padding-top:55px}.page-container h2{font-size:28px;color:#1f2d3d;margin:0}.page-container h3{font-size:22px}.page-container h2,.page-container h3,.page-container h4,.page-container h5{font-weight:400;color:#1f2f3d}.page-container h2 a,.page-container h3 a,.page-container h4 a,.page-container h5 a{float:left;margin-left:-20px;opacity:0;cursor:pointer}.page-container h2 a:hover,.page-container h2:hover a,.page-container h3 a:hover,.page-container h3:hover a,.page-container h4 a:hover,.page-container h4:hover a,.page-container h5 a:hover,.page-container h5:hover a{opacity:.4}.page-container p{font-size:14px;color:#5e6d82;line-height:1.5em}.page-container .tip{padding:8px 16px;background-color:#ecf8ff;border-radius:4px;border-left:5px solid #50bfff;margin:20px 0}.page-container .tip code{background-color:hsla(0,0%,100%,.7);color:#445368}.page-container .warning{padding:8px 16px;background-color:#fff6f7;border-radius:4px;border-left:5px solid #fe6c6f;margin:20px 0}.page-container .warning code{background-color:hsla(0,0%,100%,.7);color:#445368}.demo{margin:20px 0}@media (max-width:1140px){.container,.page-container{width:100%}}@media (max-width:768px){.container,.page-container{padding:0 20px}#app.is-component .headerWrapper .container{padding:0 12px}}.demo-block{border:1px solid #ebebeb;border-radius:3px;transition:.2s}.demo-block code{font-family:Menlo,Monaco,Consolas,Courier,monospace}.demo-block .demo-button{float:right}.demo-block .source{padding:24px}.demo-block .meta{background-color:#fafafa;border-top:1px solid #eaeefb;overflow:hidden;height:0;transition:height .2s}.demo-block .description{padding:20px;box-sizing:border-box;border:1px solid #ebebeb;border-radius:3px;font-size:14px;line-height:22px;color:#666;word-break:break-word;margin:10px;background-color:#fff}.demo-block .description p{margin:0;line-height:26px}.demo-block .description code{color:#5e6d82;background-color:#e6effb;margin:0 4px;display:inline-block;padding:1px 5px;font-size:12px;border-radius:3px;height:18px;line-height:18px}.demo-block .highlight pre{margin:0}.demo-block .highlight code.hljs{margin:0;border:none;max-height:none;border-radius:0}.demo-block .highlight code.hljs:before{content:none}.demo-block .demo-block-control{border-top:1px solid #eaeefb;height:44px;box-sizing:border-box;background-color:#fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px;text-align:center;margin-top:-1px;color:#d3dce6;cursor:pointer;position:relative}.demo-block .demo-block-control i{font-size:12px;line-height:44px;transition:.3s}.demo-block .demo-block-control i.hovering{transform:translateX(-40px)}.demo-block .demo-block-control>span{position:absolute;transform:translateX(-30px);font-size:14px;line-height:44px;transition:.3s;display:inline-block}.demo-block .demo-block-control .control-button{line-height:26px;position:absolute;top:0;right:0;font-size:14px;padding-left:5px;padding-right:25px}.demo-block .demo-block-control.is-fixed{position:fixed;bottom:0;width:868px}.demo-block .demo-block-control:hover{color:#409eff;background-color:#f9fafc}.demo-block .demo-block-control .text-slide-enter,.demo-block .demo-block-control .text-slide-leave-active{opacity:0;transform:translateX(10px)}.demo-block.hover{box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)}.footer{height:120px;background-color:#324057;color:#a4aebd;width:100%;z-index:1000;margin-top:-120px}.footer *{word-spacing:0}.footer .container{height:100%;box-sizing:border-box}.footer .footer-main{font-size:0;padding-top:40px;display:inline-block}.footer .footer-main .footer-main-title{line-height:1;font-size:22px;margin:0}.footer .footer-main .footer-main-link{display:inline-block;margin:12px 18px 0 0;line-height:1;font-size:12px;color:#768193}.footer .footer-main .footer-main-link a{color:#768193;text-decoration:none}.footer .footer-social{float:right;line-height:120px}.footer .footer-social .elementdoc{transition:.3s;display:inline-block;line-height:32px;text-align:center;color:#8d99ab;background-color:transparent;width:32px;height:32px;font-size:32px;vertical-align:middle}.footer .footer-social .elementdoc:hover{transform:scale(1.2)}.footer .footer-social .doc-icon-weixin{margin-right:36px}.footer .footer-social .doc-icon-weixin:hover{color:#fff}.footer .footer-social .doc-icon-github{margin-right:0}.footer .footer-social .doc-icon-github:hover{color:#fff}.footer-popover{padding:0;min-width:120px;line-height:normal;box-shadow:0 0 11px 0 rgba(174,187,211,.24)}.footer-popover .footer-popover-title{border-bottom:1px solid #eaeefb;height:30px;line-height:30px;text-align:center;color:#99a9bf;background-color:#f8f9fe}.footer-popover img{width:100px;height:100px;margin:10px}@media (max-width:768px){.footer .footer-social{display:none}}.header .nav[data-v-7ad4e6e1]:after,.header .nav[data-v-7ad4e6e1]:before{display:table;content:""}.header .nav[data-v-7ad4e6e1]:after{clear:both}.headerWrapper[data-v-7ad4e6e1]{height:80px;transition:transform .3s}.headerWrapper.is-hidden[data-v-7ad4e6e1]{transform:translateY(-80px)}.header[data-v-7ad4e6e1]{height:80px;background-color:#20a0ff;color:#fff;top:0;left:0;width:100%;line-height:80px;z-index:100;position:relative}.header .container[data-v-7ad4e6e1]{height:100%;box-sizing:border-box}.header h1[data-v-7ad4e6e1]{margin:0;float:left;font-size:32px;font-weight:400}.header h1 a[data-v-7ad4e6e1]{color:#333;text-decoration:none;display:block}.header h1 span[data-v-7ad4e6e1]{font-size:12px;display:inline-block;width:34px;height:18px;border:1px solid hsla(0,0%,100%,.5);text-align:center;line-height:18px;vertical-align:middle;margin-left:10px;border-radius:3px}.header .nav[data-v-7ad4e6e1]{float:right;height:100%;line-height:80px;background:transparent;padding:0;margin:0}.header .nav-gap[data-v-7ad4e6e1]{position:relative;width:1px;height:80px;padding:0 20px}.header .nav-gap[data-v-7ad4e6e1]:before{content:"";position:absolute;top:calc(50% - 8px);width:1px;height:16px;background:#ebebeb}.header .nav-logo-small[data-v-7ad4e6e1],.header .nav-logo[data-v-7ad4e6e1]{vertical-align:sub}.header .nav-logo-small[data-v-7ad4e6e1]{display:none}.header .nav-item[data-v-7ad4e6e1]{margin:0;float:left;list-style:none;position:relative;cursor:pointer}.header .nav-item a[data-v-7ad4e6e1]{text-decoration:none;color:#fff;display:block;padding:0 22px;opacity:.8}.header .nav-item a.active[data-v-7ad4e6e1],.header .nav-item a[data-v-7ad4e6e1]:hover{opacity:1}.header .nav-item a.active[data-v-7ad4e6e1]:after{content:"";display:inline-block;position:absolute;bottom:0;left:0;width:100%;height:4px;background:#99d2fc}.header .nav-item.lang-item[data-v-7ad4e6e1],.header .nav-item[data-v-7ad4e6e1]:last-child{cursor:default;margin-left:34px}.header .nav-item.lang-item span[data-v-7ad4e6e1],.header .nav-item:last-child span[data-v-7ad4e6e1]{opacity:.8}.header .nav-item.lang-item .nav-lang[data-v-7ad4e6e1],.header .nav-item:last-child .nav-lang[data-v-7ad4e6e1]{cursor:pointer;display:inline-block;height:100%}.header .nav-item.lang-item .nav-lang[data-v-7ad4e6e1]:hover,.header .nav-item:last-child .nav-lang[data-v-7ad4e6e1]:hover{opacity:1}.header .nav-item.lang-item .nav-lang.active[data-v-7ad4e6e1],.header .nav-item:last-child .nav-lang.active[data-v-7ad4e6e1]{font-weight:700;opacity:1;color:#409eff}.header-home[data-v-7ad4e6e1]{position:fixed;top:0;background-color:rgba(32,160,255,0)}.header-light[data-v-7ad4e6e1]{background-color:#fff}.header-light .nav-lang[data-v-7ad4e6e1]{color:#888}.header-light .nav-lang.acive[data-v-7ad4e6e1],.header-light .nav-lang[data-v-7ad4e6e1]:hover{font-weight:400;opacity:1;color:#409eff}.header-light .nav-lang-spe[data-v-7ad4e6e1]{color:#888}.header-light .nav-item a[data-v-7ad4e6e1]{color:#888;opacity:1}.header-light .nav-item a.active[data-v-7ad4e6e1],.header-light .nav-item a[data-v-7ad4e6e1]:hover{color:#333}.header-light .nav-item a.active[data-v-7ad4e6e1]:after{width:14px;left:calc(50% - 7px);bottom:15px;background:#409eff}.nav-dropdown[data-v-7ad4e6e1]{margin-bottom:6px;padding-left:18px;width:100%}.nav-dropdown span[data-v-7ad4e6e1]{display:block;width:100%;font-size:16px;color:#888;line-height:40px;transition:.2s;padding-bottom:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.nav-dropdown span[data-v-7ad4e6e1]:hover{cursor:pointer}.nav-dropdown i[data-v-7ad4e6e1]{transition:.2s;transform:scale(.6);font-size:12px;color:#979797}.nav-dropdown.is-active i[data-v-7ad4e6e1],.nav-dropdown.is-active span[data-v-7ad4e6e1],.nav-dropdown:hover i[data-v-7ad4e6e1],.nav-dropdown:hover span[data-v-7ad4e6e1]{color:#409eff}.nav-dropdown.is-active i[data-v-7ad4e6e1]{transform:rotate(180deg) translateY(2px) scale(.6)}.nav-dropdown-list[data-v-7ad4e6e1]{width:auto}@media (max-width:850px){.header .nav-logo[data-v-7ad4e6e1]{display:none}.header .nav-logo-small[data-v-7ad4e6e1]{display:inline-block}.header .nav-item[data-v-7ad4e6e1]{margin-left:6px}.header .nav-item a[data-v-7ad4e6e1]{padding:0 5px}.header .nav-item.lang-item[data-v-7ad4e6e1],.header .nav-item[data-v-7ad4e6e1]:last-child{margin-left:10px}}@media (max-width:700px){.header .container[data-v-7ad4e6e1]{padding:0 12px}.header .nav-item a[data-v-7ad4e6e1],.header .nav-lang[data-v-7ad4e6e1]{font-size:12px;vertical-align:top}.header .nav-dropdown[data-v-7ad4e6e1]{padding:0}.header .nav-gap[data-v-7ad4e6e1]{padding:0 8px}}.theme-picker:after{display:inline-block;content:"";height:100%;vertical-align:middle}.theme-picker{height:80px;display:inline-block}.theme-picker .el-color-picker__trigger{vertical-align:middle}.theme-picker-dropdown .el-color-dropdown__link-btn{display:none}.side-nav{width:100%;box-sizing:border-box;padding-right:30px;transition:opacity .5s}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav>ul>.nav-item>a{margin-top:15px}.side-nav .nav-item a{font-size:16px;color:#333;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:.15s ease-out;font-weight:700}.side-nav .nav-item a.active{color:#409eff}.side-nav .nav-item .nav-item a{display:block;height:40px;color:#666;line-height:40px;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400}.side-nav .nav-item .nav-item a.active,.side-nav .nav-item .nav-item a:hover{color:#409eff}.side-nav .nav-group__title{font-size:12px;color:#999;line-height:26px;margin-top:15px}.side-nav #code-sponsor-widget{margin:0 0 0 -20px}.side-nav:hover{opacity:1!important}.nav-dropdown-list{width:120px;margin-top:-8px}.nav-dropdown-list li{font-size:14px}.footer-nav{padding:40px 0;color:#333;font-size:14px}.footer-nav:after{content:"";display:block;clear:both}.footer-nav i{transition:.3s;color:#999;vertical-align:baseline}.footer-nav-link{cursor:pointer;transition:.3s}.footer-nav-link:hover,.footer-nav-link:hover i{color:#409eff}.footer-nav-left{float:left;margin-left:-4px}.footer-nav-right{float:right;margin-right:-4px} \ No newline at end of file +.hljs{display:block;overflow-x:auto;padding:.5em;background:#fff}.hljs,.hljs-subst{color:#000}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:#756bb1}.hljs-comment,.hljs-quote{color:#636363}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp{color:#31a354}.hljs-deletion,.hljs-variable{color:#88f}.hljs-built_in,.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-tag,.hljs-title,.hljs-type{color:#3182bd}.hljs-emphasis{font-style:italic}.hljs-attribute{color:#e6550d}@font-face{font-family:icomoon;src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=);src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=#iefix) format("embedded-opentype"),url(data:application/x-font-ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBccAAAC8AAAAYGNtYXAXVtKKAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsdxmDoAAAF4AAAD1GhlYWQK1CI1AAAFTAAAADZoaGVhB8IDyQAABYQAAAAkaG10eBYAAAAAAAWoAAAAIGxvY2EDFAH+AAAFyAAAABJtYXhwAA4AbwAABdwAAAAgbmFtZZlKCfsAAAX8AAABhnBvc3QAAwAAAAAHhAAAACAAAwOaAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QP//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAFAAD/wAQAA8AAEwAnADUAQwBRAAATND4CMzIeAhUUDgIjIi4CJTQuAiMiDgIVFB4CMzI+AiU0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUBIgYVFBYzITI2NTQmIwBQi7tqaruLUFCLu2pqu4tQA7NEdp9aWp92RER2n1pan3ZE/XMeFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBEBwGq7i1BQi7tqaruLUFCLu2pan3ZERHafWlqfdkREdp/nFR4eFTMWHh4WMxUeHhUzFh4eFv8AGRERGRkRERkAAAAEAAD/wAQAA8AAEwAhAC8ATwAAASIOAhUUHgIzMj4CNTQuAgE0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUTJy4BIyIGDwEOASMiJjU0NjcnNz4BMzIWFx4BFRQGJwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR5EBCpaLzBbKgQBBQIQFQYGAQoyazU2aTMJChwTA8BQi7tqaruLUFCLu2pqu4tQ/o0VHh4VMxYeHhYzFR4eFTMWHh4W/psBFRUVFQEBARgRCA8GAwUYGhkaBRMMExoGAAAEAAD/wAQAA8AAEwAhAC8APQAABSIuAjU0PgIzMh4CFRQOAgEVFBYzMjY9ATQmIyIGBRUUFjMyNj0BNCYjIgYBIgYVFBYzITI2NTQmIwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBFAUIu7amq7i1BQi7tqaruLUAKNMxYeHhYzFR4eFTMWHh4WMxUeHv64GRERGRkRERkAAAQAAP/ABAADwAATAFAAXgBsAAABIg4CFRQeAjMyPgI1NC4CExQGFQ4BFQ4DIzgBMTgBMSIuAic0Jic0JjUuATU0Njc+ATMyFhcxHgEzMjY3MT4BMzIWFx4BFRQGBwM0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUCAGq7i1BQi7tqaruLUFCLu8cBAQEVP01bMjJbTT8VAQEBAQECAgUVDAwVBSB4S0t4IAUVDAwVBQICAQG+HhUWHh4WFR7+sx4WFR4eFRYeA8BQi7tqaruLUFCLu2pqu4tQ/XICAgEBAgEpQjAbGzBCKQECAQECAgIGAwUJBAsMDAs9TEw9CwwMCwQJBQMGAgEbFR4eFTMWHh4WMxUeHhUzFh4eFgAAAAEAAAAAAADYdr5rXw889QALBAAAAAAA09ru3AAAAADT2u7cAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAgEAAAAAAAAAAAAAAACAAAABAAAAAQAAAAEAAAABAAAAAAAAAAACgAUAB4AkAECAVoB6gAAAAEAAAAIAG0ABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype"),url(data:application/font-woff;base64,d09GRgABAAAAAAfwAAsAAAAAB6QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFx2NtYXAAAAFoAAAAVAAAAFQXVtKKZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAA9QAAAPUx3GYOmhlYWQAAAWYAAAANgAAADYK1CI1aGhlYQAABdAAAAAkAAAAJAfCA8lobXR4AAAF9AAAACAAAAAgFgAAAGxvY2EAAAYUAAAAEgAAABIDFAH+bWF4cAAABigAAAAgAAAAIAAOAG9uYW1lAAAGSAAAAYYAAAGGmUoJ+3Bvc3QAAAfQAAAAIAAAACAAAwAAAAMDmgGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QMDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkD//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAA/8AEAAPAABMAJwA1AEMAUQAAEzQ+AjMyHgIVFA4CIyIuAiU0LgIjIg4CFRQeAjMyPgIlNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1ASIGFRQWMyEyNjU0JiMAUIu7amq7i1BQi7tqaruLUAOzRHafWlqfdkREdp9aWp92RP1zHhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRAcBqu4tQUIu7amq7i1BQi7tqWp92RER2n1pan3ZERHaf5xUeHhUzFh4eFjMVHh4VMxYeHhb/ABkRERkZEREZAAAABAAA/8AEAAPAABMAIQAvAE8AAAEiDgIVFB4CMzI+AjU0LgIBNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1EycuASMiBg8BDgEjIiY1NDY3Jzc+ATMyFhceARUUBicCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUeRAQqWi8wWyoEAQUCEBUGBgEKMms1NmkzCQocEwPAUIu7amq7i1BQi7tqaruLUP6NFR4eFTMWHh4WMxUeHhUzFh4eFv6bARUVFRUBAQEYEQgPBgMFGBoZGgUTDBMaBgAABAAA/8AEAAPAABMAIQAvAD0AAAUiLgI1ND4CMzIeAhUUDgIBFRQWMzI2PQE0JiMiBgUVFBYzMjY9ATQmIyIGASIGFRQWMyEyNjU0JiMCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRQFCLu2pqu4tQUIu7amq7i1ACjTMWHh4WMxUeHhUzFh4eFjMVHh7+uBkRERkZEREZAAAEAAD/wAQAA8AAEwBQAF4AbAAAASIOAhUUHgIzMj4CNTQuAhMUBhUOARUOAyM4ATE4ATEiLgInNCYnNCY1LgE1NDY3PgEzMhYXMR4BMzI2NzE+ATMyFhceARUUBgcDNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1AgBqu4tQUIu7amq7i1BQi7vHAQEBFT9NWzIyW00/FQEBAQEBAgIFFQwMFQUgeEtLeCAFFQwMFQUCAgEBvh4VFh4eFhUe/rMeFhUeHhUWHgPAUIu7amq7i1BQi7tqaruLUP1yAgIBAQIBKUIwGxswQikBAgEBAgICBgMFCQQLDAwLPUxMPQsMDAsECQUDBgIBGxUeHhUzFh4eFjMVHh4VMxYeHhYAAAABAAAAAAAA2Ha+a18PPPUACwQAAAAAANPa7twAAAAA09ru3AAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAIBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAJABAgFaAeoAAAABAAAACABtAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff"),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE+R2VuZXJhdGVkIGJ5IEljb01vb248L21ldGFkYXRhPgo8ZGVmcz4KPGZvbnQgaWQ9Imljb21vb24iIGhvcml6LWFkdi14PSIxMDI0Ij4KPGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiIC8+CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSIxMDI0IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjA7IiBob3Jpei1hZHYteD0iNTEyIiBkPSIiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAwOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLW9mZiIgZD0iTTAgNDQ4YzAgMjgyLjc2NiAyMjkuMjM0IDUxMiA1MTIgNTEyczUxMi0yMjkuMjM0IDUxMi01MTJjMC0yODIuNzY2LTIyOS4yMzQtNTEyLTUxMi01MTJzLTUxMiAyMjkuMjM0LTUxMiA1MTJ6TTk0Ny4yIDQ0OGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMnMtNDM1LjItMTk0Ljg0OS00MzUuMi00MzUuMmMwLTI0MC4zNTEgMTk0Ljg0OS00MzUuMiA0MzUuMi00MzUuMnM0MzUuMiAxOTQuODQ5IDQzNS4yIDQzNS4yek0yOTQuNCA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNNjI3LjIgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTM2MS4xNDMgMjgxLjZjLTIyLjcxMSAwLTQxLjE0My0xOC42MzctNDEuMTQzLTQxLjZzMTguNDMyLTQxLjYgNDEuMTQzLTQxLjZoMzAxLjcxNGMyMi43MTEgMCA0MS4xNDMgMTguNjM3IDQxLjE0MyA0MS42cy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNmgtMzAxLjcxNHoiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAxOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTEiIGQ9Ik01MTIuMDAxIDk2MGMtMjgyLjc3MSAwLTUxMi4wMDEtMjI5LjIzLTUxMi4wMDEtNTEyLjAwMiAwLTI4Mi43NyAyMjkuMjMtNTExLjk5OCA1MTIuMDAxLTUxMS45OTggMjgyLjc2OSAwIDUxMS45OTkgMjI5LjIyNyA1MTEuOTk5IDUxMS45OThzLTIyOS4yMyA1MTIuMDAyLTUxMS45OTkgNTEyLjAwMnpNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTYyNy4yIDU4OC44NTNjMCAyOC4yNDcgMjIuNzI2IDUxLjE0NyA1MS4yIDUxLjE0NyAyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek02OTQuNTI5IDE4MS4xOTdsLTMuNDIyIDEuMjE2Yy01Ni4xNSAyNy44NzItMTE2LjM4OCA0Mi4wNDctMTc4Ljg4MiA0Mi4wNDctNjQuNTU2IDAtMTI1LjYxMS0xNC4zMTYtMTgxLjUxNS00Mi40NWwtMy4zODItMS4xMzJjLTIuMTAyLTAuNjI4LTQuOTQ1LTEuNTI5LTguNDg5LTEuNTI5LTIwLjU1NCAwLTM3LjIzOSAxOC4yOS0zNy4yMzkgNDAuNzM0IDAgMTAuNjU1IDQuNTcxIDIxLjM2MSAxMi4xMTQgMjkuMzk5bC0wLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAyOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTIiIGQ9Ik01MTItNjRjLTI4Mi43NjYgMC01MTIgMjI5LjIzNC01MTIgNTEyczIyOS4yMzQgNTEyIDUxMiA1MTJjMjgyLjc2NiAwIDUxMi0yMjkuMjM0IDUxMi01MTJzLTIyOS4yMzQtNTEyLTUxMi01MTJ6TTI5NC40IDU4OC44NTN2LTUxLjMwN2MwLTI4LjQ4MiAyMi45MjMtNTEuMTQ3IDUxLjItNTEuMTQ3IDI4LjQ3NCAwIDUxLjIgMjIuODk5IDUxLjIgNTEuMTQ3djUxLjMwN2MwIDI4LjQ4Mi0yMi45MjMgNTEuMTQ3LTUxLjIgNTEuMTQ3LTI4LjQ3NCAwLTUxLjItMjIuODk5LTUxLjItNTEuMTQ3ek02MjcuMiA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3pNMzYxLjE0MyAyODEuNmMtMjIuNzExIDAtNDEuMTQzLTE4LjYzNy00MS4xNDMtNDEuNnMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0YzIyLjcxMSAwIDQxLjE0MyAxOC42MzcgNDEuMTQzIDQxLjZzLTE4LjQzMiA0MS42LTQxLjE0MyA0MS42aC0zMDEuNzE0eiIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGU5MDM7IiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMyIgZD0iTTUxMi4wMDEgOTYwYy0yODIuNzcgMC01MTIuMDAxLTIyOS4yMy01MTIuMDAxLTUxMS45OTlzMjI5LjIzLTUxMi4wMDEgNTEyLjAwMS01MTIuMDAxYzI4Mi43NyAwIDUxMS45OTkgMjI5LjIzIDUxMS45OTkgNTExLjk5OXMtMjI5LjIyOSA1MTIuMDAxLTUxMS45OTkgNTEyLjAwMXpNODE3LjQ5NSAzMDUuNTY1Yy0wLjQ0NS0xLjQ4NS0wLjk2My0yLjkzOS0xLjU2OS00LjM1LTAuNjc2LTEuNTcyLTEuNDU1LTMuMDg5LTIuMzE3LTQuNTU2LTU1LjYzMS0xMDcuNjEzLTE2OS41MTgtMTgxLjQ1OS0zMDEuMzIzLTE4MS40NTktMC4wOTYgMC0wLjE5IDAuMDAyLTAuMjg2IDAuMDAycy0wLjE5LTAuMDAyLTAuMjg2LTAuMDAyYy0xMzEuODA0IDAtMjQ1LjY5MyA3My44NDUtMzAxLjMyMyAxODEuNDU5LTAuODYyIDEuNDY3LTEuNjQxIDIuOTg0LTIuMzE3IDQuNTU2LTAuNjA2IDEuNDEtMS4xMjQgMi44NjUtMS41NjkgNC4zNS0xLjEwMyAzLjY4LTEuNzA1IDcuNTY5LTEuNzA1IDExLjU5NyAwIDYuNTY2IDEuNTc5IDEyLjc3MSA0LjM3MiAxOC4yODIgNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWgwLjY3NmM0MS40MTEtODEuNDUzIDEyNy4xMzEtMTM3LjU0NCAyMjYuNTA3LTEzNy42NTIgOTkuMzc1IDAuMTA4IDE4NS4wOTUgNTYuMiAyMjYuNTA3IDEzNy42NTJoMC42NzZjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIzIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIyLTIyLjk1NWMyLjc5NC01LjUxMSA0LjM3Mi0xMS43MTUgNC4zNzItMTguMjgyIDAtNC4wMjktMC42MDItNy45MTgtMS43MDUtMTEuNTk3ek02MjcuMiA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6IiAvPgo8L2ZvbnQ+PC9kZWZzPjwvc3ZnPg==#icomoon) format("svg");font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-rate-face-off:before{content:"\E900"}.icon-rate-face-1:before{content:"\E901"}.icon-rate-face-2:before{content:"\E902"}.icon-rate-face-3:before{content:"\E903"}body,html{margin:0;padding:0;height:100%;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}body.is-component,html.is-component{overflow:hidden}#app{height:100%}#app.is-component{overflow-y:hidden}#app.is-component .main-cnt{padding:0;margin-top:0;height:100%;min-height:auto}#app.is-component .headerWrapper{position:fixed;width:100%;left:0;top:0;z-index:1500}#app.is-component .headerWrapper .container{padding:0}a{color:#409eff;text-decoration:none}code{background-color:#f9fafc;padding:0 4px;border:1px solid #eaeefb;border-radius:4px}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}.hljs{line-height:1.8;font-family:Menlo,Monaco,Consolas,Courier,monospace;font-size:12px;padding:18px 24px;background-color:#fafafa;border:1px solid #eaeefb;margin-bottom:25px;border-radius:4px;-webkit-font-smoothing:auto}.main-cnt{margin-top:-80px;padding:80px 0 120px;box-sizing:border-box;min-height:100%}.container,.page-container{width:1140px;padding:0;margin:0 auto}.page-container{padding-top:55px}.page-container h2{font-size:28px;color:#1f2d3d;margin:0}.page-container h3{font-size:22px}.page-container h2,.page-container h3,.page-container h4,.page-container h5{font-weight:400;color:#1f2f3d}.page-container h2 a,.page-container h3 a,.page-container h4 a,.page-container h5 a{float:left;margin-left:-20px;opacity:0;cursor:pointer}.page-container h2 a:hover,.page-container h2:hover a,.page-container h3 a:hover,.page-container h3:hover a,.page-container h4 a:hover,.page-container h4:hover a,.page-container h5 a:hover,.page-container h5:hover a{opacity:.4}.page-container p{font-size:14px;color:#5e6d82;line-height:1.5em}.page-container .tip{padding:8px 16px;background-color:#ecf8ff;border-radius:4px;border-left:5px solid #50bfff;margin:20px 0}.page-container .tip code{background-color:hsla(0,0%,100%,.7);color:#445368}.page-container .warning{padding:8px 16px;background-color:#fff6f7;border-radius:4px;border-left:5px solid #fe6c6f;margin:20px 0}.page-container .warning code{background-color:hsla(0,0%,100%,.7);color:#445368}.demo{margin:20px 0}@media (max-width:1140px){.container,.page-container{width:100%}}@media (max-width:768px){.container,.page-container{padding:0 20px}#app.is-component .headerWrapper .container{padding:0 12px}}.demo-block{border:1px solid #ebebeb;border-radius:3px;transition:.2s}.demo-block .demo-block-control .text-slide-enter,.demo-block .demo-block-control .text-slide-leave-active{opacity:0;-ms-transform:translateX(10px);transform:translateX(10px)}.demo-block .demo-block-control:hover{color:#409eff;background-color:#f9fafc}.demo-block code{font-family:Menlo,Monaco,Consolas,Courier,monospace}.demo-block .demo-button{float:right}.demo-block .source{padding:24px}.demo-block .meta{background-color:#fafafa;border-top:1px solid #eaeefb;overflow:hidden;height:0;transition:height .2s}.demo-block .description{padding:20px;box-sizing:border-box;border:1px solid #ebebeb;border-radius:3px;font-size:14px;line-height:22px;color:#666;word-break:break-word;margin:10px;background-color:#fff}.demo-block .description p{margin:0;line-height:26px}.demo-block .description code{color:#5e6d82;background-color:#e6effb;margin:0 4px;display:inline-block;padding:1px 5px;font-size:12px;border-radius:3px;height:18px;line-height:18px}.demo-block .highlight pre{margin:0}.demo-block .highlight code.hljs{margin:0;border:none;max-height:none;border-radius:0}.demo-block .highlight code.hljs:before{content:none}.demo-block .demo-block-control{border-top:1px solid #eaeefb;height:44px;box-sizing:border-box;background-color:#fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px;text-align:center;margin-top:-1px;color:#d3dce6;cursor:pointer;position:relative}.demo-block .demo-block-control i{font-size:12px;line-height:44px;transition:.3s}.demo-block .demo-block-control i.hovering{-ms-transform:translateX(-40px);transform:translateX(-40px)}.demo-block .demo-block-control>span{position:absolute;-ms-transform:translateX(-30px);transform:translateX(-30px);font-size:14px;line-height:44px;transition:.3s;display:inline-block}.demo-block .demo-block-control .control-button{line-height:26px;position:absolute;top:0;right:0;font-size:14px;padding-left:5px;padding-right:25px}.demo-block .demo-block-control.is-fixed{position:fixed;bottom:0;width:868px}.demo-block.hover{box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)}.footer{height:120px;background-color:#324057;color:#a4aebd;width:100%;z-index:1000;margin-top:-120px}.footer *{word-spacing:0}.footer .container{height:100%;box-sizing:border-box}.footer .footer-main{font-size:0;padding-top:40px;display:inline-block}.footer .footer-main .footer-main-title{line-height:1;font-size:22px;margin:0}.footer .footer-main .footer-main-link{display:inline-block;margin:12px 18px 0 0;line-height:1;font-size:12px;color:#768193}.footer .footer-main .footer-main-link a{color:#768193;text-decoration:none}.footer .footer-social{float:right;line-height:120px}.footer .footer-social .elementdoc{transition:.3s;display:inline-block;line-height:32px;text-align:center;color:#8d99ab;background-color:transparent;width:32px;height:32px;font-size:32px;vertical-align:middle}.footer .footer-social .elementdoc:hover{-ms-transform:scale(1.2);transform:scale(1.2)}.footer .footer-social .doc-icon-weixin{margin-right:36px}.footer .footer-social .doc-icon-weixin:hover{color:#fff}.footer .footer-social .doc-icon-github{margin-right:0}.footer .footer-social .doc-icon-github:hover{color:#fff}.footer-popover{padding:0;min-width:120px;line-height:normal;box-shadow:0 0 11px 0 rgba(174,187,211,.24)}.footer-popover .footer-popover-title{border-bottom:1px solid #eaeefb;height:30px;line-height:30px;text-align:center;color:#99a9bf;background-color:#f8f9fe}.footer-popover img{width:100px;height:100px;margin:10px}@media (max-width:768px){.footer .footer-social{display:none}}.header .nav[data-v-5797d63d]:after{clear:both}.header .nav[data-v-5797d63d]:after,.header .nav[data-v-5797d63d]:before{display:table;content:""}.headerWrapper[data-v-5797d63d]{height:80px;transition:transform .3s}.headerWrapper.is-hidden[data-v-5797d63d]{-ms-transform:translateY(-80px);transform:translateY(-80px)}.header[data-v-5797d63d]{height:80px;background-color:#20a0ff;color:#fff;top:0;left:0;width:100%;line-height:80px;z-index:100;position:relative}.header .nav-item.lang-item[data-v-5797d63d],.header .nav-item[data-v-5797d63d]:last-child{cursor:default;margin-left:34px}.header .nav-item.lang-item span[data-v-5797d63d],.header .nav-item:last-child span[data-v-5797d63d]{opacity:.8}.header .nav-item.lang-item .nav-lang[data-v-5797d63d],.header .nav-item:last-child .nav-lang[data-v-5797d63d]{cursor:pointer;display:inline-block;height:100%}.header .nav-item.lang-item .nav-lang[data-v-5797d63d]:hover,.header .nav-item:last-child .nav-lang[data-v-5797d63d]:hover{opacity:1}.header .nav-item.lang-item .nav-lang.active[data-v-5797d63d],.header .nav-item:last-child .nav-lang.active[data-v-5797d63d]{font-weight:700;opacity:1;color:#409eff}.header .container[data-v-5797d63d]{height:100%;box-sizing:border-box}.header h1[data-v-5797d63d]{margin:0;float:left;font-size:32px;font-weight:400}.header h1 a[data-v-5797d63d]{color:#333;text-decoration:none;display:block}.header h1 span[data-v-5797d63d]{font-size:12px;display:inline-block;width:34px;height:18px;border:1px solid hsla(0,0%,100%,.5);text-align:center;line-height:18px;vertical-align:middle;margin-left:10px;border-radius:3px}.header .nav[data-v-5797d63d]{float:right;height:100%;line-height:80px;background:transparent;padding:0;margin:0}.header .nav-gap[data-v-5797d63d]{position:relative;width:1px;height:80px;padding:0 20px}.header .nav-gap[data-v-5797d63d]:before{content:"";position:absolute;top:calc(50% - 8px);width:1px;height:16px;background:#ebebeb}.header .nav-logo-small[data-v-5797d63d],.header .nav-logo[data-v-5797d63d]{vertical-align:sub}.header .nav-logo-small[data-v-5797d63d]{display:none}.header .nav-item[data-v-5797d63d]{margin:0;float:left;list-style:none;position:relative;cursor:pointer}.header .nav-item a.active[data-v-5797d63d]:after{content:"";display:inline-block;position:absolute;bottom:0;left:0;width:100%;height:4px;background:#99d2fc}.header .nav-item a[data-v-5797d63d]{text-decoration:none;color:#fff;display:block;padding:0 22px;opacity:.8}.header .nav-item a.active[data-v-5797d63d],.header .nav-item a[data-v-5797d63d]:hover{opacity:1}.header .nav-item.nav-algolia-search[data-v-5797d63d]{cursor:default}.header-home[data-v-5797d63d]{position:fixed;top:0;background-color:rgba(32,160,255,0)}.header-light[data-v-5797d63d]{background-color:#fff}.header-light .nav-lang[data-v-5797d63d]{color:#888}.header-light .nav-lang.acive[data-v-5797d63d],.header-light .nav-lang[data-v-5797d63d]:hover{font-weight:400;opacity:1;color:#409eff}.header-light .nav-lang-spe[data-v-5797d63d]{color:#888}.header-light .nav-item a[data-v-5797d63d]{color:#888;opacity:1}.header-light .nav-item a.active[data-v-5797d63d],.header-light .nav-item a[data-v-5797d63d]:hover{color:#333}.header-light .nav-item a.active[data-v-5797d63d]:after{width:14px;left:calc(50% - 7px);bottom:15px;background:#409eff}.nav-dropdown[data-v-5797d63d]{margin-bottom:6px;padding-left:18px;width:100%}.nav-dropdown span[data-v-5797d63d]{display:block;width:100%;font-size:16px;color:#888;line-height:40px;transition:.2s;padding-bottom:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.nav-dropdown span[data-v-5797d63d]:hover{cursor:pointer}.nav-dropdown i[data-v-5797d63d]{transition:.2s;-ms-transform:scale(.6);transform:scale(.6);font-size:12px;color:#979797}.nav-dropdown.is-active i[data-v-5797d63d],.nav-dropdown.is-active span[data-v-5797d63d],.nav-dropdown:hover i[data-v-5797d63d],.nav-dropdown:hover span[data-v-5797d63d]{color:#409eff}.nav-dropdown.is-active i[data-v-5797d63d]{-ms-transform:rotate(180deg) translateY(2px) scale(.6);transform:rotate(180deg) translateY(2px) scale(.6)}.nav-dropdown-list[data-v-5797d63d]{width:auto}@media (max-width:850px){.header .nav-logo[data-v-5797d63d]{display:none}.header .nav-logo-small[data-v-5797d63d]{display:inline-block}.header .nav-item[data-v-5797d63d]{margin-left:6px}.header .nav-item a[data-v-5797d63d]{padding:0 5px}.header .nav-item.lang-item[data-v-5797d63d],.header .nav-item[data-v-5797d63d]:last-child{margin-left:10px}.header .nav-algolia-search[data-v-5797d63d],.header .nav-theme-switch[data-v-5797d63d]{display:none}}@media (max-width:700px){.header .container[data-v-5797d63d]{padding:0 12px}.header .nav-item a[data-v-5797d63d],.header .nav-lang[data-v-5797d63d]{font-size:12px;vertical-align:top}.header .nav-dropdown[data-v-5797d63d]{padding:0}.header .nav-gap[data-v-5797d63d]{padding:0 8px}}.theme-picker:after{display:inline-block;content:"";height:100%;vertical-align:middle}.theme-picker{height:80px;display:inline-block}.theme-picker .el-color-picker__trigger{vertical-align:middle}.theme-picker-dropdown .el-color-dropdown__link-btn{display:none}.algolia-search{width:450px!important}.algolia-search .el-autocomplete-suggestion__list{position:static!important;padding-bottom:31px}.algolia-search li{border-bottom:1px solid #ebebeb}.algolia-search li:last-child{border-bottom:none}.algolia-search .algolia-highlight{color:#409eff;font-weight:700}.algolia-search .algolia-search-title{font-size:14px;margin:6px 0;line-height:1.8}.algolia-search .algolia-search-separator{padding:0 6px}.algolia-search .algolia-search-content{font-size:12px;margin:6px 0;line-height:2.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.algolia-search .algolia-search-link{position:absolute;bottom:0;left:0;width:100%;padding-right:20px;background-color:#dfe4ed;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;text-align:right}.algolia-search .algolia-search-link img{display:inline-block;height:17px;margin-top:10px}.algolia-search .algolia-search-link:hover{background-color:#dfe4ed}.algolia-search .algolia-search-empty{margin:5px 0;text-align:center;color:#999}.algolia-search.is-empty .el-autocomplete-suggestion__list{padding-bottom:0}.side-nav{width:100%;box-sizing:border-box;padding-right:30px;transition:opacity .5s}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav>ul>.nav-item>a{margin-top:15px}.side-nav>ul>.nav-item:nth-child(-n+3)>a{margin-top:0}.side-nav .nav-item a{font-size:16px;color:#333;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:.15s ease-out;font-weight:700}.side-nav .nav-item a.active{color:#409eff}.side-nav .nav-item .nav-item a{display:block;height:40px;color:#444;line-height:40px;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400}.side-nav .nav-item .nav-item a.active,.side-nav .nav-item .nav-item a:hover{color:#409eff}.side-nav .nav-group__title{font-size:12px;color:#999;line-height:26px;margin-top:15px}.side-nav #code-sponsor-widget{margin:0 0 0 -20px}.side-nav:hover{opacity:1!important}.nav-dropdown-list{width:120px;margin-top:-8px}.nav-dropdown-list li{font-size:14px}.footer-nav i{transition:.3s;color:#999;vertical-align:baseline}.footer-nav{padding:40px 0;color:#333;font-size:14px}.footer-nav:after{content:"";display:block;clear:both}.footer-nav-link{cursor:pointer;transition:.3s}.footer-nav-link:hover,.footer-nav-link:hover i{color:#409eff}.footer-nav-left{float:left;margin-left:-4px}.footer-nav-right{float:right;margin-right:-4px} \ No newline at end of file diff --git a/2.0/docs.428d642.js b/2.0/docs.428d642.js new file mode 100644 index 000000000..679557368 --- /dev/null +++ b/2.0/docs.428d642.js @@ -0,0 +1 @@ +webpackJsonp([3],{17:function(e,t){e.exports=function(e){return JSON.parse(JSON.stringify(e))}},19:function(e,t,o){"use strict";function i(e,t){var i=o(20),r=this;"function"==typeof Error.captureStackTrace?Error.captureStackTrace(this,this.constructor):r.stack=(new Error).stack||"Cannot get a stacktrace, browser is too old",this.name="AlgoliaSearchError",this.message=e||"Unknown error",t&&i(t,function(e,t){r[t]=e})}function r(e,t){function o(){var o=Array.prototype.slice.call(arguments,0);"string"!=typeof o[0]&&o.unshift(t),i.apply(this,o),this.name="AlgoliaSearch"+e+"Error"}return l(o,i),o}var l=o(25);l(i,Error),e.exports={AlgoliaSearchError:i,UnparsableJSON:r("UnparsableJSON","Could not parse the incoming response as JSON, see err.more for details"),RequestTimeout:r("RequestTimeout","Request timedout before getting a response"),Network:r("Network","Network issue, see err.more for details"),JSONPScriptFail:r("JSONPScriptFail","\n',r=(t||"").replace(/export default/,"var Main =").trim(),n=i+'\n
\n'+o.trim()+"\n
",a='@import url("//unpkg.com/element-ui@next/lib/theme-chalk/index.css");\n'+(l||"").trim()+"\n";r=r?r+"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')":"new Vue().$mount('#app')";var s={js:r,css:a,html:n,panel_js:3,panel_css:1},c=document.getElementById("fiddle-form")||document.createElement("form");c.innerHTML="";var d=document.createElement("textarea");c.method="post",c.action="https://jsfiddle.net/api/post/library/pure/",c.target="_blank";for(var p in s)d.name=p,d.value=s[p].toString(),c.appendChild(d.cloneNode());c.setAttribute("id","fiddle-form"),c.style.display="none",document.body.appendChild(c),c.submit()},scrollHandler:function(){var e=this.$refs.meta.getBoundingClientRect(),t=e.top,o=e.bottom,l=e.left;this.fixedControl=o>document.documentElement.clientHeight&&t+44<=document.documentElement.clientHeight,this.$refs.control.style.left=this.fixedControl?l+"px":"0"},removeScrollHandler:function(){this.scrollParent&&this.scrollParent.removeEventListener("scroll",this.scrollHandler)}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var e=this;return r.default.filter(function(t){return t.lang===e.lang})[0]["demo-block"]},blockClass:function(){return"demo-"+this.lang+" demo-"+this.$router.currentRoute.path.split("/").pop()},iconClass:function(){return this.isExpanded?"el-icon-caret-top":"el-icon-caret-bottom"},controlText:function(){return this.isExpanded?this.langConfig["hide-text"]:this.langConfig["show-text"]},codeArea:function(){return this.$el.getElementsByClassName("meta")[0]},codeAreaHeight:function(){return this.$el.getElementsByClassName("description").length>0?this.$el.getElementsByClassName("description")[0].clientHeight+this.$el.getElementsByClassName("highlight")[0].clientHeight+20:this.$el.getElementsByClassName("highlight")[0].clientHeight}},watch:{isExpanded:function(e){var t=this;return this.codeArea.style.height=e?this.codeAreaHeight+1+"px":"0",e?void setTimeout(function(){t.scrollParent=document.querySelector(".page-component__scroll > .el-scrollbar__wrap"),t.scrollParent&&t.scrollParent.addEventListener("scroll",t.scrollHandler),t.scrollHandler()},200):(this.fixedControl=!1,this.$refs.control.style.left="0",void this.removeScrollHandler())}},mounted:function(){var e=this;this.$nextTick(function(){var t=e.$el.getElementsByClassName("highlight")[0];0===e.$el.getElementsByClassName("description").length&&(t.style.width="100%",t.borderRight="none")})},beforeDestroy:function(){this.removeScrollHandler()}}},1074:function(e,t){e.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 jsfiddle.net 运行此示例"},footer:{feedback:"反馈建议",contribution:"贡献指南",eleme:"饿了么"},header:{guide:"指南",components:"组件",resource:"资源"},nav:{dropdown:"版本："}},{lang:"en-US","demo-block":{"hide-text":"Hide","show-text":"Expand","button-text":"Try it!","tooltip-text":"Run this demo on jsfiddle.net"},footer:{feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}}]},1075:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"demo-block",class:[e.blockClass,{hover:e.hovering}],on:{mouseenter:function(t){e.hovering=!0},mouseleave:function(t){e.hovering=!1}}},[e._t("source"),o("div",{ref:"meta",staticClass:"meta"},[e.$slots.default?o("div",{staticClass:"description"},[e._t("default")],2):e._e(),e._t("highlight")],2),o("div",{ref:"control",staticClass:"demo-block-control",class:{"is-fixed":e.fixedControl},on:{click:function(t){e.isExpanded=!e.isExpanded}}},[o("transition",{attrs:{name:"arrow-slide"}},[o("i",{class:[e.iconClass,{hovering:e.hovering}]})]),o("transition",{attrs:{name:"text-slide"}},[o("span",{directives:[{name:"show",rawName:"v-show",value:e.hovering,expression:"hovering"}]},[e._v(e._s(e.controlText))])]),o("el-tooltip",{attrs:{effect:"dark",content:e.langConfig["tooltip-text"],placement:"right"}},[o("transition",{attrs:{name:"text-slide"}},[o("el-button",{directives:[{name:"show",rawName:"v-show",value:e.hovering||e.isExpanded,expression:"hovering || isExpanded"}],staticClass:"control-button",attrs:{size:"small",type:"text"},on:{click:function(t){t.stopPropagation(),e.goJsfiddle(t)}}},[e._v("\n "+e._s(e.langConfig["button-text"])+"\n ")])],1)],1)],1)],2)},staticRenderFns:[]}},1076:function(e,t,o){function l(e){o(1077)}var i=o(13)(o(1079),o(1080),l,null,null);e.exports=i.exports},1077:function(e,t){},1079:function(e,t,o){"use strict";function l(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=o(1074),r=l(i),n=o(657);t.default={data:function(){return{version:n.version}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var e=this;return r.default.filter(function(t){return t.lang===e.lang})[0].footer}}}},1080:function(e,t,o){e.exports={render:function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("footer",{staticClass:"footer"},[l("div",{staticClass:"container"},[l("div",{staticClass:"footer-main"},[l("p",{staticClass:"footer-main-title"},[e._v("Element "+e._s(e.version&&e.version.slice(0,3))+" Carbon")]),l("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/issues",target:"_blank"}},[e._v(e._s(e.langConfig.feedback))]),l("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING."+e.lang+".md",target:"_blank"}},[e._v(e._s(e.langConfig.contribution))]),l("a",{staticClass:"footer-main-link",attrs:{href:"https://eleme.github.io/element-react/#/"+e.lang+"/quick-start",target:"_blank"}},[e._v("Element-React")])]),l("div",{staticClass:"footer-social"},[l("el-popover",{ref:"weixin",attrs:{placement:"top",width:"120","popper-class":"footer-popover",trigger:"hover"}},[l("div",{staticClass:"footer-popover-title"},[e._v(e._s(e.langConfig.eleme)+" UED")]),l("img",{attrs:{src:o(1081),alt:""}})]),l("i",{directives:[{name:"popover",rawName:"v-popover:weixin",arg:"weixin"}],staticClass:"doc-icon-weixin elementdoc"}),e._m(0)],1)])])},staticRenderFns:[function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("a",{attrs:{href:"//github.com/elemefe",target:"_blank"}},[o("i",{staticClass:"doc-icon-github elementdoc"})])}]}},1081:function(e,t,o){e.exports=o.p+"static/qrcode.a88f522.png"},1082:function(e,t,o){function l(e){o(1083)}var i=o(13)(o(1085),o(1091),l,"data-v-7ad4e6e1",null);e.exports=i.exports},1083:function(e,t){},1085:function(e,t,o){"use strict";function l(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=o(1086),r=l(i),n=o(42),a=l(n),s=o(1074),c=l(s),d=o(657);t.default={data:function(){return{active:"",isHome:!0,headerStyle:{},visible:!0,versions:[],version:d.version,dropdownVisible:!0,isComponentPage:!0}},components:{ThemePicker:r.default},watch:{"$route.path":{immediate:!0,handler:function(){this.handlePathChange()}}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var e=this;return c.default.filter(function(t){return t.lang===e.lang})[0].header}},methods:{switchVersion:function(e){e!==this.version&&(location.href=location.origin+"/"+this.versions[e]+"/"+location.hash+" ")},switchLang:function(e){this.lang!==e&&(localStorage.setItem("ELEMENT_LANGUAGE",e),this.$router.push(this.$route.path.replace(this.lang,e)))},handleDropdownToggle:function(e){this.dropdownVisible=e; -},handlePathChange:function(){var e=this.$route.name;return this.isComponentPage=/^component-/.test(e),this.isHome=/^home/.test(e),this.isComponentPage?void(this.headerStyle.backgroundColor="#fff"):void(this.headerStyle.backgroundColor="rgba(32, 160, 255, "+(this.isHome?"0":"1")+")")}},created:function(){var e=this;this.handlePathChange(),a.default.$on("toggleHeader",function(t){e.visible=t});var t=new XMLHttpRequest;t.onreadystatechange=function(o){4===t.readyState&&200===t.status&&(e.versions=JSON.parse(t.responseText))},t.open("GET","/versions.json"),t.send()},mounted:function(){function e(e){document.body.addEventListener("scroll",e,!1)}var t=this;e(function(){if(t.isHome){var e=200,o=Math.min(document.documentElement.scrollTop||document.body.scrollTop,e)/e;t.$refs.header.style.backgroundColor="rgba(32, 160, 255, "+o+")"}})}}},1086:function(e,t,o){function l(e){o(1087)}var i=o(13)(o(1089),o(1090),l,null,null);e.exports=i.exports},1087:function(e,t){},1089:function(e,t,o){"use strict";t.__esModule=!0;var l=o(657),i="#409EFF";t.default={data:function(){return{chalk:"",docs:"",theme:i}},watch:{theme:function(e,t){var o=this;if("string"==typeof e){var r=this.getThemeCluster(e.replace("#","")),n=this.getThemeCluster(t.replace("#","")),a=function(e,t){return function(){var l=o.getThemeCluster(i.replace("#","")),n=o.updateStyle(o[e],l,r),a=document.getElementById(t);a||(a=document.createElement("style"),a.setAttribute("id",t),document.head.appendChild(a)),a.innerText=n}},s=a("chalk","chalk-style"),c=a("docs","docs-style");if(this.chalk)s();else{var d="https://unpkg.com/element-ui@"+l.version+"/lib/theme-chalk/index.css";this.getCSSString(d,s,"chalk")}if(this.docs)c();else{var p=[].filter.call(document.querySelectorAll("link"),function(e){return/docs\..+\.css/.test(e.href||"")});p[0]&&this.getCSSString(p[0].href,c,"docs")}var g=[].slice.call(document.querySelectorAll("style")).filter(function(e){var o=e.innerText;return new RegExp(t,"i").test(o)&&!/Chalk Variables/.test(o)});g.forEach(function(e){var t=e.innerText;"string"==typeof t&&(e.innerText=o.updateStyle(t,n,r))})}}},methods:{updateStyle:function(e,t,o){var l=e;return t.forEach(function(e,t){l=l.replace(new RegExp(e,"ig"),o[t])}),l},getCSSString:function(e,t,o){var l=this,i=new XMLHttpRequest;i.onreadystatechange=function(){4===i.readyState&&200===i.status&&(l[o]=i.responseText.replace(/@font-face{[^}]+}/,""),t())},i.open("GET",e),i.send()},getThemeCluster:function(e){for(var t=function(e,t){var o=parseInt(e.slice(0,2),16),l=parseInt(e.slice(2,4),16),i=parseInt(e.slice(4,6),16);return 0===t?[o,l,i].join(","):(o+=Math.round(t*(255-o)),l+=Math.round(t*(255-l)),i+=Math.round(t*(255-i)),o=o.toString(16),l=l.toString(16),i=i.toString(16),"#"+o+l+i)},o=[e],l=0;l<=9;l++)o.push(t(e,Number((l/10).toFixed(2))));return o}}}},1090:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("el-color-picker",{staticClass:"theme-picker",attrs:{"popper-class":"theme-picker-dropdown"},model:{value:e.theme,callback:function(t){e.theme=t},expression:"theme"}})},staticRenderFns:[]}},1091:function(e,t,o){e.exports={render:function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",{staticClass:"headerWrapper"},[l("header",{ref:"header",staticClass:"header",class:{"header-home":e.isHome,"header-light":e.isComponentPage},style:e.headerStyle},[l("div",{staticClass:"container"},[l("h1",[l("router-link",{attrs:{to:"/"+e.lang}},[e.isComponentPage?e._t("default",[l("img",{staticClass:"nav-logo",attrs:{src:o(1092),alt:"element-logo"}}),l("img",{staticClass:"nav-logo-small",attrs:{src:o(1093),alt:"element-logo"}})]):e._t("default",[l("img",{staticClass:"nav-logo",attrs:{src:o(1094),alt:"element-logo"}}),l("img",{staticClass:"nav-logo-small",attrs:{src:o(1095),alt:"element-logo"}})])],2)],1),l("ul",{staticClass:"nav"},[l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+e.lang+"/guide"}},[e._v(e._s(e.langConfig.guide)+"\n ")])],1),l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+e.lang+"/component"}},[e._v(e._s(e.langConfig.components)+"\n ")])],1),l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+e.lang+"/resource",exact:""}},[e._v(e._s(e.langConfig.resource)+"\n ")])],1),l("li",{directives:[{name:"show",rawName:"v-show",value:e.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item"},[l("div",{staticClass:"nav-gap"})]),l("li",{directives:[{name:"show",rawName:"v-show",value:e.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item"},[l("el-dropdown",{staticClass:"nav-dropdown",class:{"is-active":e.dropdownVisible},attrs:{trigger:"click"}},[l("span",[e._v("\n "+e._s(e.langConfig.dropdown)+e._s(e.version)+"\n "),l("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),l("el-dropdown-menu",{staticClass:"nav-dropdown-list",on:{input:e.handleDropdownToggle},slot:"dropdown"},e._l(Object.keys(e.versions),function(t){return l("el-dropdown-item",{key:t,nativeOn:{click:function(o){e.switchVersion(t)}}},[e._v("\n "+e._s(t)+"\n ")])}))],1)],1),l("li",{staticClass:"nav-item lang-item"},[l("span",{staticClass:"nav-lang",class:{active:"zh-CN"===e.lang},on:{click:function(t){e.switchLang("zh-CN")}}},[e._v("\n 中文\n ")]),l("span",{staticClass:"nav-lang-spe"},[e._v(" / ")]),l("span",{staticClass:"nav-lang",class:{active:"en-US"===e.lang},on:{click:function(t){e.switchLang("en-US")}}},[e._v("\n En\n ")])]),l("li",{directives:[{name:"show",rawName:"v-show",value:e.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-item"},[l("theme-picker")],1)])])])])},staticRenderFns:[]}},1092:function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiM0MDlFRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1Mzc0LDQ2LjY3MjMxNjkgTDE3NC41NzUzNzQsMzQuOTY5MjkxMSBDMTc0LjU3NTM3NCwzNC4yOTYyOTgzIDE3NS41Mzg0NTIsMzQuMDA1NTEyNSAxNzUuNTM4NDUyLDM0LjAwNTUxMjUgTDE4NS44NTcxNTIsMzQuMDA1NTEyNSBDMTg2Ljg5NDExMywzNC4wMDU1MTI1IDE4Ny4wOTUzOTYsMzUuMjQ0NjU2NCAxODcuMDk1Mzk2LDM1LjI0NDY1NjQgTDE4Ny4wOTUzOTYsNDEuMTY1MDEwNyBDMTg3LjA5NTM5Niw0Mi4xNjM4OTgzIDE4NS44NTcxNTIsNDIuNDA0MTU0NiAxODUuODU3MTUyLDQyLjQwNDE1NDYgTDE4NS44NTcxNTIsNDIuNDA0MTU0NiBaIE0xODQuMzQzNzQzLDM3LjQ0NzU3ODkgQzE4NC4zNDM3NDMsMzcuNDQ3NTc4OSAxODQuMjU3MDY2LDM2Ljc1OTE2NTcgMTgzLjY1NTgzLDM2Ljc1OTE2NTcgTDE3OC4wMTQ5NCwzNi43NTkxNjU3IEMxNzguMDE0OTQsMzYuNzU5MTY1NyAxNzcuMzI3MDI3LDM2Ljk0Mzc5ODEgMTc3LjMyNzAyNywzNy40NDc1Nzg5IEwxNzcuMzI3MDI3LDM4Ljk2MjA4ODIgQzE3Ny4zMjcwMjcsMzguOTYyMDg4MiAxNzcuMzQ2ODM5LDM5LjY1MDUwMTQgMTc4LjAxNDk0LDM5LjY1MDUwMTQgTDE4My42NTU4MywzOS42NTA1MDE0IEMxODMuNjU1ODMsMzkuNjUwNTAxNCAxODQuMzQzNzQzLDM5LjQ4MDQ2MzQgMTg0LjM0Mzc0MywzOC44MjQ0MDU1IEwxODQuMzQzNzQzLDM3LjQ0NzU3ODkgTDE4NC4zNDM3NDMsMzcuNDQ3NTc4OSBaIE0xNzEuNDEwOTcyLDQ4LjE4NjgyNjEgTDE2OS4yMDk2NSw0OC4xODY4MjYxIEMxNjguOTE5MjEzLDQ4LjE4NjgyNjEgMTY4Ljc5NjkwMiw0Ny43NzM3NzgxIDE2OC43OTY5MDIsNDcuNzczNzc4MSBMMTY4Ljc5NjkwMiwzNy40NDc1Nzg5IEMxNjguNzk2OTAyLDM2LjgwNzIxNjkgMTY3Ljk3MTQwNiwzNi42MjE0ODMgMTY3Ljk3MTQwNiwzNi42MjE0ODMgTDE2NS45MDc2NjYsMzYuNjIxNDgzIEMxNjUuMzMxODgyLDM2LjYyMTQ4MyAxNjUuMjE5NzUyLDM3LjQ0NzU3ODkgMTY1LjIxOTc1MiwzNy40NDc1Nzg5IEwxNjUuMjE5NzUyLDQ3Ljc3Mzc3ODEgQzE2NS4yMTk3NTIsNDguMTE2MzMyNiAxNjQuODA3MDA0LDQ4LjE4NjgyNjEgMTY0LjgwNzAwNCw0OC4xODY4MjYxIEwxNjIuNjA1NjgyLDQ4LjE4NjgyNjEgQzE2Mi4yOTk1Niw0OC4xODY4MjYxIDE2Mi4xOTI5MzQsNDcuNzczNzc4MSAxNjIuMTkyOTM0LDQ3Ljc3Mzc3ODEgTDE2Mi4xOTI5MzQsMzcuNDQ3NTc4OSBDMTYyLjE5MjkzNCwzNi43OTI4OTc5IDE2MS4zNjc0MzgsMzYuNjIxNDgzIDE2MS4zNjc0MzgsMzYuNjIxNDgzIEwxNTkuMzAzNjk4LDM2LjYyMTQ4MyBDMTU4LjY3Mzk4MiwzNi42MjE0ODMgMTU4LjYxNTc4NCwzNy40NDc1Nzg5IDE1OC42MTU3ODQsMzcuNDQ3NTc4OSBMMTU4LjYxNTc4NCw0Ny43NzM3NzgxIEMxNTguNjE1Nzg0LDQ4LjIxNTczOTUgMTU4LjIwMzAzNiw0OC4xODY4MjYxIDE1OC4yMDMwMzYsNDguMTg2ODI2MSBMMTU2LjAwMTcxNCw0OC4xODY4MjYxIEMxNTUuNTg5Mzc4LDQ4LjE4NjgyNjEgMTU1LjU4ODk2Niw0Ny43NzM3NzgxIDE1NS41ODg5NjYsNDcuNzczNzc4MSBMMTU1LjU4ODk2NiwzNC42OTM5MjU4IEMxNTUuNTg4OTY2LDMzLjkzNjI1ODIgMTU2LjY4OTYyNywzMy41OTI0NjQ2IDE1Ni42ODk2MjcsMzMuNTkyNDY0NiBMMTcwLjQ0Nzg5NCwzMy41OTI0NjQ2IEMxNzEuNTUyMjcsMzMuNTkyNDY0NiAxNzEuODIzNzIsMzQuOTY5MjkxMSAxNzEuODIzNzIsMzQuOTY5MjkxMSBMMTcxLjgyMzcyLDQ3Ljc3Mzc3ODEgQzE3MS44MjM3Miw0OC4yNDkzMzQgMTcxLjQxMDk3Miw0OC4xODY4MjYxIDE3MS40MTA5NzIsNDguMTg2ODI2MSBMMTcxLjQxMDk3Miw0OC4xODY4MjYxIFogTTE1MS40NjE0ODYsNDIuNDA0MTU0NiBMMTQyLjkzMTM2LDQyLjQwNDE1NDYgTDE0Mi45MzEzNiw0NC40NjkzOTQ0IEMxNDIuOTMxMzYsNDUuMjEzNTY5MSAxNDMuODk0NDM5LDQ1LjQzMzE3MyAxNDMuODk0NDM5LDQ1LjQzMzE3MyBMMTUwLjc3MzU3Miw0NS40MzMxNzMgQzE1MS4yNjMwOTIsNDUuNDMzMTczIDE1MS41OTkwNjgsNDUuODQ2MjIxIDE1MS41OTkwNjgsNDUuODQ2MjIxIEMxNTEuNTk5MDY4LDQ1Ljg0NjIyMSAxNTIuMTk5MjA0LDQ3LjA5NTE0MDMgMTUyLjQyNDU2NCw0Ny42MzYwOTU1IEMxNTIuNjQ5Nzg3LDQ4LjE3NzA1MDYgMTUyLjAxMTgxNiw0OC4xODY4MjYxIDE1Mi4wMTE4MTYsNDguMTg2ODI2MSBMMTQxLjY5MzExNyw0OC4xODY4MjYxIEMxNDAuNDUwNDcsNDguMTg2ODI2MSAxNDAuMTc5NzA3LDQ2LjY3MjMxNjkgMTQwLjE3OTcwNyw0Ni42NzIzMTY5IEwxNDAuMTc5NzA3LDM0Ljk2OTI5MTEgQzE0MC4xNzk3MDcsMzQuMjk2Mjk4MyAxNDEuMTQyNzg2LDM0LjAwNTUxMjUgMTQxLjE0Mjc4NiwzNC4wMDU1MTI1IEwxNTEuNDYxNDg2LDM0LjAwNTUxMjUgQzE1Mi40OTg0NDYsMzQuMDA1NTEyNSAxNTIuNjk5NzMsMzUuMjQ0NjU2NCAxNTIuNjk5NzMsMzUuMjQ0NjU2NCBMMTUyLjY5OTczLDQxLjE2NTAxMDcgQzE1Mi42OTk3Myw0Mi4xNjM4OTgzIDE1MS40NjE0ODYsNDIuNDA0MTU0NiAxNTEuNDYxNDg2LDQyLjQwNDE1NDYgTDE1MS40NjE0ODYsNDIuNDA0MTU0NiBaIE0xNDkuOTQ4MDc2LDM3LjQ0NzU3ODkgQzE0OS45NDgwNzYsMzcuNDQ3NTc4OSAxNDkuODYxMzk5LDM2Ljc1OTE2NTcgMTQ5LjI2MDE2MywzNi43NTkxNjU3IEwxNDMuNjE5Mjc0LDM2Ljc1OTE2NTcgQzE0My42MTkyNzQsMzYuNzU5MTY1NyAxNDIuOTMxMzYsMzYuOTQzNzk4MSAxNDIuOTMxMzYsMzcuNDQ3NTc4OSBMMTQyLjkzMTM2LDM4Ljk2MjA4ODIgQzE0Mi45MzEzNiwzOC45NjIwODgyIDE0Mi45NTExNzIsMzkuNjUwNTAxNCAxNDMuNjE5Mjc0LDM5LjY1MDUwMTQgTDE0OS4yNjAxNjMsMzkuNjUwNTAxNCBDMTQ5LjI2MDE2MywzOS42NTA1MDE0IDE0OS45NDgwNzYsMzkuNDgwNDYzNCAxNDkuOTQ4MDc2LDM4LjgyNDQwNTUgTDE0OS45NDgwNzYsMzcuNDQ3NTc4OSBMMTQ5Ljk0ODA3NiwzNy40NDc1Nzg5IFogTTEzOC4xMTU5NjcsNDguMTg2ODI2MSBMMTMyLjg4NzgyNiw0OC4xODY4MjYxIEMxMzIuODg3ODI2LDQ4LjE4NjgyNjEgMTI5LjA2MTkyNyw0OC4wMDYxODY1IDEyOC43NjAzNDYsNDQuMTk0MDI5MSBDMTI4Ljc0ODIzOSw0MC4yNzkwMjI4IDEyOC43NjAzNDYsMjguMDg1MTU4MyAxMjguNzYwMzQ2LDI4LjA4NTE1ODMgTDEzMS4yMzY4MzQsMjguMDg1MTU4MyBDMTMxLjIzNjgzNCwyOC4wODUxNTgzIDEzMi4wNjIzMywyOC4wNzAxNTA5IDEzMi4wNjIzMywyOC45MTEyNTQzIEwxMzIuMDYyMzMsNDMuMzY3OTMzMSBDMTMyLjA2MjMzLDQzLjM2NzkzMzEgMTMyLjM1MDAxNSw0NC41NjM4NDQ3IDEzMy45ODg0ODcsNDUuMDIwMTI1IEMxMzUuODM5OCw0NS4wMTA3NjI2IDEzNi4xODk4MSw0NS4wMjAxMjUgMTM2LjE4OTgxLDQ1LjAyMDEyNSBDMTM2LjE4OTgxLDQ1LjAyMDEyNSAxMzYuOTA3MzAzLDQ0Ljc5MDE5NSAxMzcuNDI4MDU0LDQ1LjcwODUzODMgQzEzNy45NDg4MDQsNDYuNjI2ODgxNiAxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjUyODcxNSw0Ny42MzYwOTU1IEMxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjYxMTU0LDQ4LjE4NjgyNjEgMTM4LjExNTk2Nyw0OC4xODY4MjYxIEwxMzguMTE1OTY3LDQ4LjE4NjgyNjEgWiBNMTExLjU2MjUxMyw0Ny4zNjA3MzAyIEwxMTEuNTYyNTEzLDI5LjE4NjYxOTYgQzExMS41NjI1MTMsMjguMzgwNzYzIDExMi4yNTA0MjYsMjguMjIyODQxIDExMi4yNTA0MjYsMjguMjIyODQxIEwxMjUuMTgzMTk3LDI4LjIyMjg0MSBDMTI1LjkwNjQ2OSwyOC4yMjI4NDEgMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS41OTU5NDUsMjkuMDQ4OTM2OSBDMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS4xOTI4MjcsMzAuMTY2MDk0IDEyNC45MDgwMzEsMzAuNzAxMTI4OCBDMTI0LjYyMzIzNSwzMS4yMzYxNjM2IDEyNC4wODI1MzUsMzEuMjUxODU5NCAxMjQuMDgyNTM1LDMxLjI1MTg1OTQgTDExNS42ODk5OTMsMzEuMjUxODU5NCBDMTE0LjkwODUyMywzMS4yNTE4NTk0IDExNC44NjQ0OTcsMzEuOTQwMjcyNyAxMTQuODY0NDk3LDMxLjk0MDI3MjcgTDExNC44NjQ0OTcsMzYuNDgzODAwMyBMMTI0LjM1NzcwMSwzNi40ODM4MDAzIEMxMjQuOTE0NjM1LDM2LjQ4MzgwMDMgMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyNC42MzI4NjYsMzcuMTcyMjEzNiBDMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyMy45MjE4MzksMzguNjg4OTI1OCAxMjMuNjY5Nzg3LDM5LjA5OTc3MDggQzEyMy40MTc3MzYsMzkuNTEwNjE1OSAxMjIuODQ0MjkxLDM5LjUxMjgxODggMTIyLjg0NDI5MSwzOS41MTI4MTg4IEwxMTQuODY0NDk3LDM5LjUxMjgxODggTDExNC44NjQ0OTcsNDQuMzMxNzExNyBDMTE0Ljg2NDQ5Nyw0NC45ODg0NTggMTE1LjU1MjQxLDQ1LjE1NzgwNzcgMTE1LjU1MjQxLDQ1LjE1NzgwNzcgTDEyNC4zNTc3MDEsNDUuMTU3ODA3NyBDMTI0Ljk5NjIyMiw0NS4xNTc4MDc3IDEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjUuMTgzMTk3LDQ1LjU3MDg1NTYgQzEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjYuMDU1MTk2LDQ2LjkzMjM5OTQgMTI2LjQyMTQ0MSw0Ny40OTg0MTI4IEMxMjYuNzg3ODIzLDQ4LjA2NDQyNjIgMTI2LjI4Mzg1OCw0OC4xODY4MjYxIDEyNi4yODM4NTgsNDguMTg2ODI2MSBMMTEyLjM4ODAwOSw0OC4xODY4MjYxIEMxMTEuODE0MTUxLDQ4LjE4NjgyNjEgMTExLjU2MjUxMyw0Ny4zNjA3MzAyIDExMS41NjI1MTMsNDcuMzYwNzMwMiBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},1093:function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDM4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MCAoMzM3NjIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlNoYXBlIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0idjIuMi4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6aaW6aG1Lem7mOiupOaViOaenC1jb3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MC4wMDAwMDAsIC0xOS4wMDAwMDApIiBmaWxsPSIjNDA5RUZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTIxMi4xMzU0NDEsNDUuMTU3ODA3NyBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},1094:function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiNmZmYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1Mzc0LDQ2LjY3MjMxNjkgTDE3NC41NzUzNzQsMzQuOTY5MjkxMSBDMTc0LjU3NTM3NCwzNC4yOTYyOTgzIDE3NS41Mzg0NTIsMzQuMDA1NTEyNSAxNzUuNTM4NDUyLDM0LjAwNTUxMjUgTDE4NS44NTcxNTIsMzQuMDA1NTEyNSBDMTg2Ljg5NDExMywzNC4wMDU1MTI1IDE4Ny4wOTUzOTYsMzUuMjQ0NjU2NCAxODcuMDk1Mzk2LDM1LjI0NDY1NjQgTDE4Ny4wOTUzOTYsNDEuMTY1MDEwNyBDMTg3LjA5NTM5Niw0Mi4xNjM4OTgzIDE4NS44NTcxNTIsNDIuNDA0MTU0NiAxODUuODU3MTUyLDQyLjQwNDE1NDYgTDE4NS44NTcxNTIsNDIuNDA0MTU0NiBaIE0xODQuMzQzNzQzLDM3LjQ0NzU3ODkgQzE4NC4zNDM3NDMsMzcuNDQ3NTc4OSAxODQuMjU3MDY2LDM2Ljc1OTE2NTcgMTgzLjY1NTgzLDM2Ljc1OTE2NTcgTDE3OC4wMTQ5NCwzNi43NTkxNjU3IEMxNzguMDE0OTQsMzYuNzU5MTY1NyAxNzcuMzI3MDI3LDM2Ljk0Mzc5ODEgMTc3LjMyNzAyNywzNy40NDc1Nzg5IEwxNzcuMzI3MDI3LDM4Ljk2MjA4ODIgQzE3Ny4zMjcwMjcsMzguOTYyMDg4MiAxNzcuMzQ2ODM5LDM5LjY1MDUwMTQgMTc4LjAxNDk0LDM5LjY1MDUwMTQgTDE4My42NTU4MywzOS42NTA1MDE0IEMxODMuNjU1ODMsMzkuNjUwNTAxNCAxODQuMzQzNzQzLDM5LjQ4MDQ2MzQgMTg0LjM0Mzc0MywzOC44MjQ0MDU1IEwxODQuMzQzNzQzLDM3LjQ0NzU3ODkgTDE4NC4zNDM3NDMsMzcuNDQ3NTc4OSBaIE0xNzEuNDEwOTcyLDQ4LjE4NjgyNjEgTDE2OS4yMDk2NSw0OC4xODY4MjYxIEMxNjguOTE5MjEzLDQ4LjE4NjgyNjEgMTY4Ljc5NjkwMiw0Ny43NzM3NzgxIDE2OC43OTY5MDIsNDcuNzczNzc4MSBMMTY4Ljc5NjkwMiwzNy40NDc1Nzg5IEMxNjguNzk2OTAyLDM2LjgwNzIxNjkgMTY3Ljk3MTQwNiwzNi42MjE0ODMgMTY3Ljk3MTQwNiwzNi42MjE0ODMgTDE2NS45MDc2NjYsMzYuNjIxNDgzIEMxNjUuMzMxODgyLDM2LjYyMTQ4MyAxNjUuMjE5NzUyLDM3LjQ0NzU3ODkgMTY1LjIxOTc1MiwzNy40NDc1Nzg5IEwxNjUuMjE5NzUyLDQ3Ljc3Mzc3ODEgQzE2NS4yMTk3NTIsNDguMTE2MzMyNiAxNjQuODA3MDA0LDQ4LjE4NjgyNjEgMTY0LjgwNzAwNCw0OC4xODY4MjYxIEwxNjIuNjA1NjgyLDQ4LjE4NjgyNjEgQzE2Mi4yOTk1Niw0OC4xODY4MjYxIDE2Mi4xOTI5MzQsNDcuNzczNzc4MSAxNjIuMTkyOTM0LDQ3Ljc3Mzc3ODEgTDE2Mi4xOTI5MzQsMzcuNDQ3NTc4OSBDMTYyLjE5MjkzNCwzNi43OTI4OTc5IDE2MS4zNjc0MzgsMzYuNjIxNDgzIDE2MS4zNjc0MzgsMzYuNjIxNDgzIEwxNTkuMzAzNjk4LDM2LjYyMTQ4MyBDMTU4LjY3Mzk4MiwzNi42MjE0ODMgMTU4LjYxNTc4NCwzNy40NDc1Nzg5IDE1OC42MTU3ODQsMzcuNDQ3NTc4OSBMMTU4LjYxNTc4NCw0Ny43NzM3NzgxIEMxNTguNjE1Nzg0LDQ4LjIxNTczOTUgMTU4LjIwMzAzNiw0OC4xODY4MjYxIDE1OC4yMDMwMzYsNDguMTg2ODI2MSBMMTU2LjAwMTcxNCw0OC4xODY4MjYxIEMxNTUuNTg5Mzc4LDQ4LjE4NjgyNjEgMTU1LjU4ODk2Niw0Ny43NzM3NzgxIDE1NS41ODg5NjYsNDcuNzczNzc4MSBMMTU1LjU4ODk2NiwzNC42OTM5MjU4IEMxNTUuNTg4OTY2LDMzLjkzNjI1ODIgMTU2LjY4OTYyNywzMy41OTI0NjQ2IDE1Ni42ODk2MjcsMzMuNTkyNDY0NiBMMTcwLjQ0Nzg5NCwzMy41OTI0NjQ2IEMxNzEuNTUyMjcsMzMuNTkyNDY0NiAxNzEuODIzNzIsMzQuOTY5MjkxMSAxNzEuODIzNzIsMzQuOTY5MjkxMSBMMTcxLjgyMzcyLDQ3Ljc3Mzc3ODEgQzE3MS44MjM3Miw0OC4yNDkzMzQgMTcxLjQxMDk3Miw0OC4xODY4MjYxIDE3MS40MTA5NzIsNDguMTg2ODI2MSBMMTcxLjQxMDk3Miw0OC4xODY4MjYxIFogTTE1MS40NjE0ODYsNDIuNDA0MTU0NiBMMTQyLjkzMTM2LDQyLjQwNDE1NDYgTDE0Mi45MzEzNiw0NC40NjkzOTQ0IEMxNDIuOTMxMzYsNDUuMjEzNTY5MSAxNDMuODk0NDM5LDQ1LjQzMzE3MyAxNDMuODk0NDM5LDQ1LjQzMzE3MyBMMTUwLjc3MzU3Miw0NS40MzMxNzMgQzE1MS4yNjMwOTIsNDUuNDMzMTczIDE1MS41OTkwNjgsNDUuODQ2MjIxIDE1MS41OTkwNjgsNDUuODQ2MjIxIEMxNTEuNTk5MDY4LDQ1Ljg0NjIyMSAxNTIuMTk5MjA0LDQ3LjA5NTE0MDMgMTUyLjQyNDU2NCw0Ny42MzYwOTU1IEMxNTIuNjQ5Nzg3LDQ4LjE3NzA1MDYgMTUyLjAxMTgxNiw0OC4xODY4MjYxIDE1Mi4wMTE4MTYsNDguMTg2ODI2MSBMMTQxLjY5MzExNyw0OC4xODY4MjYxIEMxNDAuNDUwNDcsNDguMTg2ODI2MSAxNDAuMTc5NzA3LDQ2LjY3MjMxNjkgMTQwLjE3OTcwNyw0Ni42NzIzMTY5IEwxNDAuMTc5NzA3LDM0Ljk2OTI5MTEgQzE0MC4xNzk3MDcsMzQuMjk2Mjk4MyAxNDEuMTQyNzg2LDM0LjAwNTUxMjUgMTQxLjE0Mjc4NiwzNC4wMDU1MTI1IEwxNTEuNDYxNDg2LDM0LjAwNTUxMjUgQzE1Mi40OTg0NDYsMzQuMDA1NTEyNSAxNTIuNjk5NzMsMzUuMjQ0NjU2NCAxNTIuNjk5NzMsMzUuMjQ0NjU2NCBMMTUyLjY5OTczLDQxLjE2NTAxMDcgQzE1Mi42OTk3Myw0Mi4xNjM4OTgzIDE1MS40NjE0ODYsNDIuNDA0MTU0NiAxNTEuNDYxNDg2LDQyLjQwNDE1NDYgTDE1MS40NjE0ODYsNDIuNDA0MTU0NiBaIE0xNDkuOTQ4MDc2LDM3LjQ0NzU3ODkgQzE0OS45NDgwNzYsMzcuNDQ3NTc4OSAxNDkuODYxMzk5LDM2Ljc1OTE2NTcgMTQ5LjI2MDE2MywzNi43NTkxNjU3IEwxNDMuNjE5Mjc0LDM2Ljc1OTE2NTcgQzE0My42MTkyNzQsMzYuNzU5MTY1NyAxNDIuOTMxMzYsMzYuOTQzNzk4MSAxNDIuOTMxMzYsMzcuNDQ3NTc4OSBMMTQyLjkzMTM2LDM4Ljk2MjA4ODIgQzE0Mi45MzEzNiwzOC45NjIwODgyIDE0Mi45NTExNzIsMzkuNjUwNTAxNCAxNDMuNjE5Mjc0LDM5LjY1MDUwMTQgTDE0OS4yNjAxNjMsMzkuNjUwNTAxNCBDMTQ5LjI2MDE2MywzOS42NTA1MDE0IDE0OS45NDgwNzYsMzkuNDgwNDYzNCAxNDkuOTQ4MDc2LDM4LjgyNDQwNTUgTDE0OS45NDgwNzYsMzcuNDQ3NTc4OSBMMTQ5Ljk0ODA3NiwzNy40NDc1Nzg5IFogTTEzOC4xMTU5NjcsNDguMTg2ODI2MSBMMTMyLjg4NzgyNiw0OC4xODY4MjYxIEMxMzIuODg3ODI2LDQ4LjE4NjgyNjEgMTI5LjA2MTkyNyw0OC4wMDYxODY1IDEyOC43NjAzNDYsNDQuMTk0MDI5MSBDMTI4Ljc0ODIzOSw0MC4yNzkwMjI4IDEyOC43NjAzNDYsMjguMDg1MTU4MyAxMjguNzYwMzQ2LDI4LjA4NTE1ODMgTDEzMS4yMzY4MzQsMjguMDg1MTU4MyBDMTMxLjIzNjgzNCwyOC4wODUxNTgzIDEzMi4wNjIzMywyOC4wNzAxNTA5IDEzMi4wNjIzMywyOC45MTEyNTQzIEwxMzIuMDYyMzMsNDMuMzY3OTMzMSBDMTMyLjA2MjMzLDQzLjM2NzkzMzEgMTMyLjM1MDAxNSw0NC41NjM4NDQ3IDEzMy45ODg0ODcsNDUuMDIwMTI1IEMxMzUuODM5OCw0NS4wMTA3NjI2IDEzNi4xODk4MSw0NS4wMjAxMjUgMTM2LjE4OTgxLDQ1LjAyMDEyNSBDMTM2LjE4OTgxLDQ1LjAyMDEyNSAxMzYuOTA3MzAzLDQ0Ljc5MDE5NSAxMzcuNDI4MDU0LDQ1LjcwODUzODMgQzEzNy45NDg4MDQsNDYuNjI2ODgxNiAxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjUyODcxNSw0Ny42MzYwOTU1IEMxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjYxMTU0LDQ4LjE4NjgyNjEgMTM4LjExNTk2Nyw0OC4xODY4MjYxIEwxMzguMTE1OTY3LDQ4LjE4NjgyNjEgWiBNMTExLjU2MjUxMyw0Ny4zNjA3MzAyIEwxMTEuNTYyNTEzLDI5LjE4NjYxOTYgQzExMS41NjI1MTMsMjguMzgwNzYzIDExMi4yNTA0MjYsMjguMjIyODQxIDExMi4yNTA0MjYsMjguMjIyODQxIEwxMjUuMTgzMTk3LDI4LjIyMjg0MSBDMTI1LjkwNjQ2OSwyOC4yMjI4NDEgMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS41OTU5NDUsMjkuMDQ4OTM2OSBDMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS4xOTI4MjcsMzAuMTY2MDk0IDEyNC45MDgwMzEsMzAuNzAxMTI4OCBDMTI0LjYyMzIzNSwzMS4yMzYxNjM2IDEyNC4wODI1MzUsMzEuMjUxODU5NCAxMjQuMDgyNTM1LDMxLjI1MTg1OTQgTDExNS42ODk5OTMsMzEuMjUxODU5NCBDMTE0LjkwODUyMywzMS4yNTE4NTk0IDExNC44NjQ0OTcsMzEuOTQwMjcyNyAxMTQuODY0NDk3LDMxLjk0MDI3MjcgTDExNC44NjQ0OTcsMzYuNDgzODAwMyBMMTI0LjM1NzcwMSwzNi40ODM4MDAzIEMxMjQuOTE0NjM1LDM2LjQ4MzgwMDMgMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyNC42MzI4NjYsMzcuMTcyMjEzNiBDMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyMy45MjE4MzksMzguNjg4OTI1OCAxMjMuNjY5Nzg3LDM5LjA5OTc3MDggQzEyMy40MTc3MzYsMzkuNTEwNjE1OSAxMjIuODQ0MjkxLDM5LjUxMjgxODggMTIyLjg0NDI5MSwzOS41MTI4MTg4IEwxMTQuODY0NDk3LDM5LjUxMjgxODggTDExNC44NjQ0OTcsNDQuMzMxNzExNyBDMTE0Ljg2NDQ5Nyw0NC45ODg0NTggMTE1LjU1MjQxLDQ1LjE1NzgwNzcgMTE1LjU1MjQxLDQ1LjE1NzgwNzcgTDEyNC4zNTc3MDEsNDUuMTU3ODA3NyBDMTI0Ljk5NjIyMiw0NS4xNTc4MDc3IDEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjUuMTgzMTk3LDQ1LjU3MDg1NTYgQzEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjYuMDU1MTk2LDQ2LjkzMjM5OTQgMTI2LjQyMTQ0MSw0Ny40OTg0MTI4IEMxMjYuNzg3ODIzLDQ4LjA2NDQyNjIgMTI2LjI4Mzg1OCw0OC4xODY4MjYxIDEyNi4yODM4NTgsNDguMTg2ODI2MSBMMTEyLjM4ODAwOSw0OC4xODY4MjYxIEMxMTEuODE0MTUxLDQ4LjE4NjgyNjEgMTExLjU2MjUxMyw0Ny4zNjA3MzAyIDExMS41NjI1MTMsNDcuMzYwNzMwMiBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"; -},1095:function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDM4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MCAoMzM3NjIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlNoYXBlIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0idjIuMi4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6aaW6aG1Lem7mOiupOaViOaenC1jb3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MC4wMDAwMDAsIC0xOS4wMDAwMDApIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHBhdGggZD0iTTIxMi4xMzU0NDEsNDUuMTU3ODA3NyBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},1096:function(e,t,o){function l(e){o(1097)}var i=o(13)(o(1099),o(1100),l,null,null);e.exports=i.exports},1097:function(e,t){},1099:function(e,t,o){"use strict";function l(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=o(42),r=l(i),n=o(1074),a=l(n);t.default={props:{data:Array,base:{type:String,default:""}},data:function(){return{highlights:[],navState:[],isSmallScreen:!1,isFade:!1}},watch:{"$route.path":function(){this.handlePathChange()},isFade:function(e){r.default.$emit("navFade",e)}},computed:{navStyle:function(){var e={};return this.isSmallScreen&&(e.paddingBottom="60px"),this.isFade&&(e.opacity="0.5"),e},langConfig:function(){var e=this;return a.default.filter(function(t){return t.lang===e.$route.meta.lang})[0].nav}},methods:{handleResize:function(){this.isSmallScreen=document.documentElement.clientWidth<768,this.handlePathChange()},handlePathChange:function(){var e=this;return this.isSmallScreen?void this.$nextTick(function(){e.hideAllMenu();for(var t=e.$el.querySelector("a.active"),o=t.parentNode;"UL"!==o.tagName;)o=o.parentNode;o.style.height="auto"}):void this.expandAllMenu()},hideAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(e){e.style.height="0"})},expandAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(e){e.style.height="auto"})},expandMenu:function(e){if(this.isSmallScreen){var t=e.currentTarget;t.nextElementSibling&&"UL"===t.nextElementSibling.tagName&&(this.hideAllMenu(),e.currentTarget.nextElementSibling.style.height="auto")}}},created:function(){var e=this;r.default.$on("fadeNav",function(){e.isFade=!0})},mounted:function(){this.handleResize(),window.addEventListener("resize",this.handleResize)},beforeDestroy:function(){window.removeEventListener("resize",this.handleResize)}}},1100:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"side-nav",style:e.navStyle,on:{mouseenter:function(t){e.isFade=!1}}},[o("ul",e._l(e.data,function(t){return o("li",{staticClass:"nav-item"},[t.path||t.href?e._e():o("a",{on:{click:e.expandMenu}},[e._v(e._s(t.name))]),t.href?o("a",{attrs:{href:t.href,target:"_blank"}},[e._v(e._s(t.name))]):e._e(),t.path?o("router-link",{attrs:{"active-class":"active",to:e.base+t.path,exact:""},domProps:{textContent:e._s(t.title||t.name)}}):e._e(),t.children?o("ul",{staticClass:"pure-menu-list sub-nav"},e._l(t.children,function(t){return o("li",{staticClass:"nav-item"},[o("router-link",{attrs:{"active-class":"active",to:e.base+t.path,exact:""},domProps:{textContent:e._s(t.title||t.name)}})],1)})):e._e(),t.groups?e._l(t.groups,function(t){return o("div",{staticClass:"nav-group"},[o("div",{staticClass:"nav-group__title",on:{click:e.expandMenu}},[e._v(e._s(t.groupName))]),o("ul",{staticClass:"pure-menu-list"},e._l(t.list,function(t){return t.disabled?e._e():o("li",{staticClass:"nav-item"},[o("router-link",{attrs:{"active-class":"active",to:e.base+t.path,exact:""},domProps:{textContent:e._s(t.title)}})],1)}))])}):e._e()],2)})),o("div",{attrs:{id:"code-sponsor-widget"}})])},staticRenderFns:[]}},1101:function(e,t,o){function l(e){o(1102)}var i=o(13)(o(1104),o(1105),l,null,null);e.exports=i.exports},1102:function(e,t){},1104:function(e,t,o){"use strict";function l(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var i=o(24),r=l(i);t.default={data:function(){return{currentComponent:null,nav:[],currentIndex:-1,leftNav:null,rightNav:null}},computed:{lang:function(){return this.$route.meta.lang}},watch:{"$route.path":function(){this.setNav(),this.updateNav()}},methods:{setNav:function(){var e=this,t=r.default[this.lang];this.nav=[t[0]].concat(t[2].children),t[3].groups.map(function(e){return e.list}).forEach(function(t){e.nav=e.nav.concat(t)})},updateNav:function(){this.currentComponent="/"+this.$route.path.split("/")[3];for(var e=0,t=this.nav.length;e1?t-1:0),r=1;re?s():t!==!0&&(o=setTimeout(n?a:s,void 0===n?e-u:e))}var o,r=0;return"boolean"!=typeof t&&(n=i,i=t,t=void 0),s}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){var n;!function(s){"use strict";function o(e,t){for(var i=[],n=0,s=e.length;n3?0:(e-e%10!==10)*e%10]}};var b={D:function(e){return e.getDay()},DD:function(e){return a(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return a(e.getDate())},ddd:function(e,t){return t.dayNamesShort[e.getDay()]},dddd:function(e,t){return t.dayNames[e.getDay()]},M:function(e){return e.getMonth()+1},MM:function(e){return a(e.getMonth()+1)},MMM:function(e,t){return t.monthNamesShort[e.getMonth()]},MMMM:function(e,t){return t.monthNames[e.getMonth()]},yy:function(e){return String(e.getFullYear()).substr(2)},yyyy:function(e){return e.getFullYear()},h:function(e){return e.getHours()%12||12},hh:function(e){return a(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return a(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return a(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return a(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return a(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return a(e.getMilliseconds(),3)},a:function(e,t){return e.getHours()<12?t.amPm[0]:t.amPm[1]},A:function(e,t){return e.getHours()<12?t.amPm[0].toUpperCase():t.amPm[1].toUpperCase()},ZZ:function(e){var t=e.getTimezoneOffset();return(t>0?"-":"+")+a(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},_={d:[c,function(e,t){e.day=t}],M:[c,function(e,t){e.month=t-1}],yy:[c,function(e,t){var i=new Date,n=+(""+i.getFullYear()).substr(0,2);e.year=""+(t>68?n-1:n)+t}],h:[c,function(e,t){e.hour=t}],m:[c,function(e,t){e.minute=t}],s:[c,function(e,t){e.second=t}],yyyy:[h,function(e,t){e.year=t}],S:[/\d/,function(e,t){e.millisecond=100*t}],SS:[/\d{2}/,function(e,t){e.millisecond=10*t}],SSS:[d,function(e,t){e.millisecond=t}],D:[c,p],ddd:[f,p],MMM:[f,r("monthNamesShort")],MMMM:[f,r("monthNames")],a:[f,function(e,t,i){var n=t.toLowerCase();n===i.amPm[0]?e.isPm=!1:n===i.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var i,n=(t+"").match(/([\+\-]|\d\d)/gi);n&&(i=+(60*n[1])+parseInt(n[2],10),e.timezoneOffset="+"===n[0]?i:-i)}]};_.DD=_.D,_.dddd=_.ddd,_.Do=_.dd=_.d,_.mm=_.m,_.hh=_.H=_.HH=_.h,_.MM=_.M,_.ss=_.s,_.A=_.a,l.masks={default:"ddd MMM dd yyyy HH:mm:ss",shortDate:"M/D/yy",mediumDate:"MMM d, yyyy",longDate:"MMMM d, yyyy",fullDate:"dddd, MMMM d, yyyy",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},l.format=function(e,t,i){var n=i||l.i18n;if("number"==typeof e&&(e=new Date(e)),"[object Date]"!==Object.prototype.toString.call(e)||isNaN(e.getTime()))throw new Error("Invalid Date in fecha.format");return t=l.masks[t]||t||l.masks.default,t.replace(u,function(t){return t in b?b[t](e,n):t.slice(1,t.length-1)})},l.parse=function(e,t,i){var n=i||l.i18n;if("string"!=typeof t)throw new Error("Invalid format in fecha.parse");if(t=l.masks[t]||t,e.length>1e3)return!1;var s=!0,o={};if(t.replace(u,function(t){if(_[t]){var i=_[t],r=e.search(i[0]);~r?e.replace(i[0],function(t){return i[1](o,t,n),e=e.substr(r+t.length),t}):s=!1}return _[t]?"":t.slice(1,t.length-1)}),!s)return!1;var r=new Date;o.isPm===!0&&null!=o.hour&&12!==+o.hour?o.hour=+o.hour+12:o.isPm===!1&&12===+o.hour&&(o.hour=0);var a;return null!=o.timezoneOffset?(o.minute=+(o.minute||0)-+o.timezoneOffset,a=new Date(Date.UTC(o.year||r.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0))):a=new Date(o.year||r.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0),a},"undefined"!=typeof e&&e.exports?e.exports=l:(n=function(){return l}.call(t,i,t,e),!(void 0!==n&&(e.exports=n)))}(void 0)},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!e||!t)return!1;if(t.indexOf(" ")!==-1)throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):(" "+e.className+" ").indexOf(" "+t+" ")>-1}function o(e,t){if(e){for(var i=e.className,n=(t||"").split(" "),o=0,r=n.length;o1&&void 0!==arguments[1]?arguments[1]:{};e.installed||(Vt.default.use(i.locale),Vt.default.i18n(i.i18n),Bt.map(function(e){t.component(e.name,e)}),t.use(Ae.default.directive),t.prototype.$loading=Ae.default.service,t.prototype.$msgbox=fe.default,t.prototype.$alert=fe.default.alert,t.prototype.$confirm=fe.default.confirm,t.prototype.$prompt=fe.default.prompt,t.prototype.$notify=Oe.default,t.prototype.$message=Je.default)};"undefined"!=typeof window&&window.Vue&&Rt(window.Vue),e.exports={version:"2.0.0-alpha.2",locale:Vt.default.use,i18n:Vt.default.i18n,install:Rt,CollapseTransition:At.default,Loading:Ae.default,Pagination:o.default,Dialog:a.default,Autocomplete:u.default,Dropdown:d.default,DropdownMenu:f.default,DropdownItem:m.default,Menu:g.default,Submenu:b.default,MenuItem:x.default,MenuItemGroup:w.default,Input:S.default,InputNumber:$.default,Radio:T.default,RadioGroup:P.default,RadioButton:O.default,Checkbox:V.default,CheckboxButton:A.default,CheckboxGroup:R.default,Switch:H.default,Select:W.default,Option:j.default,OptionGroup:Y.default,Button:U.default,ButtonGroup:J.default,Table:Q.default,TableColumn:te.default,DatePicker:ne.default,TimeSelect:oe.default,TimePicker:ae.default,Popover:ue.default,Tooltip:de.default,MessageBox:fe.default,Breadcrumb:me.default,BreadcrumbItem:ge.default,Form:be.default,FormItem:xe.default,Tabs:we.default,TabPane:Se.default,Tag:$e.default,Tree:Te.default,Alert:Pe.default,Notification:Oe.default,Slider:Ve.default,Icon:Re.default,Row:He.default,Col:We.default,Upload:je.default,Progress:Ye.default,Spinner:Ue.default,Message:Je.default,Badge:Qe.default,Card:tt.default,Rate:nt.default,Steps:ot.default,Step:at.default,Carousel:ut.default,Scrollbar:dt.default,CarouselItem:ft.default,Collapse:mt.default,CollapseItem:gt.default,Cascader:bt.default,ColorPicker:xt.default,Transfer:wt.default,Container:St.default,Header:$t.default,Aside:Tt.default,Main:Pt.default,Footer:Ot.default}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(659),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(660),o=n(s),r=i(663),a=n(r),l=i(700),u=n(l),c=i(669),d=n(c),h=i(668),f=n(h);t.default={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}},popperClass:String,prevText:String,nextText:String},data:function(){return{internalCurrentPage:1,internalPageSize:0}},render:function(e){var t=e("div",{class:"el-pagination"},[]),i=this.layout||"";if(i){var n={prev:e("prev",null,[]),jumper:e("jumper",null,[]),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount},on:{change:this.handleCurrentChange}},[]),next:e("next",null,[]),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}},[]),slot:e("my-slot",null,[]),total:e("total",null,[])},s=i.split(",").map(function(e){return e.trim()}),o=e("div",{class:"el-pagination__rightwrapper"},[]),r=!1;return this.small&&(t.data.class+=" el-pagination--small"),s.forEach(function(e){return"->"===e?void(r=!0):void(r?o.children.push(n[e]):t.children.push(n[e]))}),r&&t.children.unshift(o),t}},components:{MySlot:{render:function(e){return this.$parent.$slots.default?this.$parent.$slots.default[0]:""}},Prev:{render:function(e){return e("button",{attrs:{type:"button"},class:["btn-prev",{disabled:this.$parent.internalCurrentPage<=1}],on:{click:this.$parent.prev}},[this.$parent.prevText?e("span",null,[this.$parent.prevText]):e("i",{class:"el-icon el-icon-arrow-left"},[])])}},Next:{render:function(e){return e("button",{attrs:{type:"button"},class:["btn-next",{disabled:this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount}],on:{click:this.$parent.next}},[this.$parent.nextText?e("span",null,[this.$parent.nextText]):e("i",{class:"el-icon el-icon-arrow-right"},[])])}},Sizes:{mixins:[f.default],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e){Array.isArray(e)&&(this.$parent.internalPageSize=e.indexOf(this.$parent.pageSize)>-1?this.$parent.pageSize:this.pageSizes[0])}}},render:function(e){var t=this;return e("span",{class:"el-pagination__sizes"},[e("el-select",{attrs:{value:this.$parent.internalPageSize,popperClass:(this.$parent.popperClass||"")+" is-arrow-fixed"},on:{input:this.handleChange}},[this.pageSizes.map(function(i){return e("el-option",{attrs:{value:i,label:i+t.t("el.pagination.pagesize")}},[])})])])},components:{ElSelect:a.default,ElOption:u.default,ElInput:d.default},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[f.default],data:function(){return{oldValue:null}},methods:{handleFocus:function(e){this.oldValue=e.target.value},handleBlur:function(e){var t=e.target;this.reassignMaxValue(t)},handleKeyUp:function(e){var t=e.key||"",i=e.keyCode||"";(t&&"Enter"===t||i&&13===i)&&(this.reassignMaxValue(e.target),this.handleChange({target:e.target}))},handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.oldValue=null},reassignMaxValue:function(e){+e.value>this.$parent.internalPageCount&&(e.value=this.$parent.internalPageCount)}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("el-input",{class:"el-pagination__editor is-in-pagination",attrs:{min:1,max:this.$parent.internalPageCount,value:this.$parent.internalCurrentPage,type:"number"},domProps:{value:this.$parent.internalCurrentPage},on:{change:this.handleChange,focus:this.handleFocus,blur:this.handleBlur},nativeOn:{keyup:this.handleKeyUp}},[]),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[f.default],render:function(e){return"number"==typeof this.$parent.total?e("span",{class:"el-pagination__total"},[this.t("el.pagination.total",{total:this.$parent.total})]):""}},Pager:o.default},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)},prev:function(){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e)},next:function(){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e)},getValidCurrentPage:function(e){e=parseInt(e,10);var t="number"==typeof this.internalPageCount,i=void 0;return t?e<1?i=1:e>this.internalPageCount&&(i=this.internalPageCount):(isNaN(e)||e<1)&&(i=1),void 0===i&&isNaN(e)?i=1:0===i&&(i=1),void 0===i?e:i}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.ceil(this.total/this.internalPageSize):"number"==typeof this.pageCount?this.pageCount:null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=e}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=e}},internalCurrentPage:function(e,t){var i=this;e=parseInt(e,10),e=isNaN(e)?t||1:this.getValidCurrentPage(e),void 0!==e?this.$nextTick(function(){i.internalCurrentPage=e,t!==e&&(i.$emit("update:currentPage",e),i.$emit("current-change",i.internalCurrentPage))}):(this.$emit("update:currentPage",e),this.$emit("current-change",this.internalCurrentPage))},internalPageCount:function(e){var t=this.internalCurrentPage;e>0&&0===t?this.internalCurrentPage=1:t>e&&(this.internalCurrentPage=0===e?1:e)}}}},function(e,t,i){var n=i(13)(i(661),i(662),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElPager",props:{currentPage:Number,pageCount:Number},watch:{showPrevMore:function(e){e||(this.quickprevIconClass="el-icon-more")},showNextMore:function(e){e||(this.quicknextIconClass="el-icon-more")}},methods:{onPagerClick:function(e){var t=e.target;if("UL"!==t.tagName){var i=Number(e.target.textContent),n=this.pageCount,s=this.currentPage;t.className.indexOf("more")!==-1&&(t.className.indexOf("quickprev")!==-1?i=s-5:t.className.indexOf("quicknext")!==-1&&(i=s+5)),isNaN(i)||(i<1&&(i=1),i>n&&(i=n)),i!==s&&this.$emit("change",i)}}},computed:{pagers:function(){var e=7,t=Number(this.currentPage),i=Number(this.pageCount),n=!1,s=!1;i>e&&(t>e-3&&(n=!0),t0?i("li",{staticClass:"number",class:{active:1===e.currentPage}},[e._v("1")]):e._e(),e.showPrevMore?i("li",{staticClass:"el-icon more btn-quickprev",class:[e.quickprevIconClass],on:{mouseenter:function(t){e.quickprevIconClass="el-icon-d-arrow-left"},mouseleave:function(t){e.quickprevIconClass="el-icon-more"}}}):e._e(),e._l(e.pagers,function(t){return i("li",{staticClass:"number",class:{active:e.currentPage===t}},[e._v(e._s(t))])}),e.showNextMore?i("li",{staticClass:"el-icon more btn-quicknext",class:[e.quicknextIconClass],on:{mouseenter:function(t){e.quicknextIconClass="el-icon-d-arrow-right"},mouseleave:function(t){e.quicknextIconClass="el-icon-more"}}}):e._e(),e.pageCount>1?i("li",{staticClass:"number",class:{active:e.currentPage===e.pageCount}},[e._v(e._s(e.pageCount))]):e._e()],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(664),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(665),i(699),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=i(666),r=n(o),a=i(667),l=n(a),u=i(668),c=n(u),d=i(669),h=n(d),f=i(675),p=n(f),m=i(683),v=n(m),g=i(686),y=n(g),b=i(690),_=n(b),x=i(695),C=n(x),w=i(696),k=n(w),S=i(292),M=i(692),$=i(15),E=i(697),T=n(E),D=i(19),P=i(698),N=n(P),O={medium:36,small:32,mini:28},F=function(e,t){if(e===t)return!0;if(!(e instanceof Array))return!1;if(!(t instanceof Array))return!1;if(e.length!==t.length)return!1;for(var i=0;i!==e.length;++i)if(e[i]!==t[i])return!1;return!0};t.default={mixins:[r.default,c.default,(0,l.default)("reference"),N.default],name:"ElSelect",componentName:"ElSelect",provide:function(){return{select:this}},computed:{iconClass:function(){var e=this.clearable&&!this.disabled&&this.inputHovering&&!this.multiple&&void 0!==this.value&&""!==this.value;return e?"circle-close is-show-close":this.remote&&this.filterable?"":"arrow-up"},debounce:function(){return this.remote?300:0},emptyText:function(){return this.loading?this.loadingText||this.t("el.select.loading"):(!this.remote||""!==this.query||0!==this.options.length)&&(this.filterable&&this.options.length>0&&0===this.filteredOptionsCount?this.noMatchText||this.t("el.select.noMatch"):0===this.options.length?this.noDataText||this.t("el.select.noData"):null)},showNewOption:function(){var e=this,t=this.options.filter(function(e){return!e.created}).some(function(t){return t.currentLabel===e.query});return this.filterable&&this.allowCreate&&""!==this.query&&!t}},components:{ElInput:h.default,ElSelectMenu:p.default,ElOption:v.default,ElTag:y.default,ElScrollbar:_.default},directives:{Clickoutside:k.default},props:{name:String,value:{required:!0},size:String,disabled:Boolean,clearable:Boolean,filterable:Boolean,allowCreate:Boolean,loading:Boolean,popperClass:String,remote:Boolean,loadingText:String,noMatchText:String,noDataText:String,remoteMethod:Function,filterMethod:Function,multiple:Boolean,multipleLimit:{type:Number,default:0},placeholder:{type:String,default:function(){return(0,$.t)("el.select.placeholder")}},defaultFirstOption:Boolean,valueKey:{type:String,default:"value"}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},inputLength:20,inputWidth:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,visible:!1,selectedLabel:"",hoverIndex:-1,query:"",previousQuery:"",inputHovering:!1,currentPlaceholder:""}},watch:{placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e){this.multiple&&(this.resetInputHeight(),e.length>0||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20)},visible:function(e){var t=this;e?(this.handleIconShow(),this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.remote?"":this.selectedLabel,this.handleQueryChange(this.query),this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.$refs.reference.$el.querySelector("input").blur(),this.handleIconHide(),this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.selectedLabel="",this.inputLength=20,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdOption?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel))),this.$emit("visible-change",e)},options:function(){if(!this.$isServer){this.multiple&&this.resetInputHeight();var e=this.$el.querySelectorAll("input");[].indexOf.call(e,document.activeElement)===-1&&this.setSelected(),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}}},methods:{handleQueryChange:function(e){var t=this;this.previousQuery!==e&&(this.previousQuery=e,this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable&&(this.inputLength=15*this.$refs.input.value.length+20,this.managePlaceholder(),this.resetInputHeight()),this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e)):"function"==typeof this.filterMethod?(this.filterMethod(e),this.broadcast("ElOptionGroup","queryChange")):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e),this.broadcast("ElOptionGroup","queryChange")),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption())},handleIconHide:function(){var e=this.$el.querySelector(".el-input__icon");e&&(0,S.removeClass)(e,"is-reverse")},handleIconShow:function(){var e=this.$el.querySelector(".el-input__icon");e&&!(0,S.hasClass)(e,"el-icon-circle-close")&&(0,S.addClass)(e,"is-reverse")},scrollToOption:function(e){var t=Array.isArray(e)&&e[0]?e[0].$el:e.$el;if(this.$refs.popper&&t){var i=this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap");(0,T.default)(i,t)}},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.scrollToOption(e.selected)})},emitChange:function(e){F(this.value,e)||(this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e))},getOption:function(e){for(var t=void 0,i="[object object]"===Object.prototype.toString.call(e).toLowerCase(),n=this.cachedOptions.length-1;n>=0;n--){var s=this.cachedOptions[n],o=i?(0,D.getValueByPath)(s.value,this.valueKey)===(0,D.getValueByPath)(e,this.valueKey):s.value===e;if(o){t=s;break}}if(t)return t;var r=i?"":e,a={value:e,currentLabel:r};return this.multiple&&(a.hitState=!1),a},setSelected:function(){var e=this;if(!this.multiple){var t=this.getOption(this.value);return t.created?(this.createdLabel=t.currentLabel,this.createdSelected=!0):this.createdSelected=!1,this.selectedLabel=t.currentLabel,this.selected=t,void(this.filterable&&(this.query=this.selectedLabel))}var i=[];Array.isArray(this.value)&&this.value.forEach(function(t){i.push(e.getOption(t))}),this.selected=i,this.$nextTick(function(){e.resetInputHeight()})},handleFocus:function(e){this.visible=!0,this.$emit("focus",e)},handleBlur:function(e){this.$emit("blur",e)},handleIconClick:function(e){this.iconClass.indexOf("circle-close")>-1?this.deleteSelected(e):this.toggleMenu()},handleMouseDown:function(e){"INPUT"===e.target.tagName&&this.visible&&(this.handleClose(),e.preventDefault())},doDestroy:function(){this.$refs.popper&&this.$refs.popper.doDestroy()},handleClose:function(){ -this.visible=!1},toggleLastOptionHitState:function(e){if(Array.isArray(this.selected)){var t=this.selected[this.selected.length-1];if(t)return e===!0||e===!1?(t.hitState=e,e):(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){if(e.target.value.length<=0&&!this.toggleLastOptionHitState()){var t=this.value.slice();t.pop(),this.$emit("input",t),this.emitChange(t)}},managePlaceholder:function(){""!==this.currentPlaceholder&&(this.currentPlaceholder=this.$refs.input.value?"":this.cachedPlaceHolder)},resetInputState:function(e){8!==e.keyCode&&this.toggleLastOptionHitState(!1),this.inputLength=15*this.$refs.input.value.length+20,this.resetInputHeight()},resetInputHeight:function(){var e=this;this.$nextTick(function(){if(e.$refs.reference){var t=e.$refs.reference.$el.childNodes,i=[].filter.call(t,function(e){return"INPUT"===e.tagName})[0];i.style.height=Math.max(e.$refs.tags.clientHeight+10,O[e.size]||40)+"px",e.visible&&e.emptyText!==!1&&e.broadcast("ElSelectDropdown","updatePopper")}})},resetHoverIndex:function(){var e=this;setTimeout(function(){e.multiple?e.selected.length>0?e.hoverIndex=Math.min.apply(null,e.selected.map(function(t){return e.options.indexOf(t)})):e.hoverIndex=-1:e.hoverIndex=e.options.indexOf(e.selected)},300)},handleOptionSelect:function(e){var t=this;if(this.multiple){var i=this.value.slice(),n=this.getValueIndex(i,e.value);n>-1?i.splice(n,1):(this.multipleLimit<=0||i.length0&&void 0!==arguments[0]?arguments[0]:[],i=arguments[1],n="[object object]"===Object.prototype.toString.call(i).toLowerCase();if(!n)return t.indexOf(i);var o=function(){var n=e.valueKey,s=-1;return t.some(function(e,t){return(0,D.getValueByPath)(e,n)===(0,D.getValueByPath)(i,n)&&(s=t,!0)}),{v:s}}();return"object"===("undefined"==typeof o?"undefined":s(o))?o.v:void 0},toggleMenu:function(){this.disabled||(this.visible=!this.visible,this.visible&&(this.$refs.input||this.$refs.reference).focus())},selectOption:function(){this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex])},deleteSelected:function(e){e.stopPropagation(),this.$emit("input",""),this.emitChange(""),this.visible=!1,this.$emit("clear")},deleteTag:function(e,t){var i=this.selected.indexOf(t);if(i>-1&&!this.disabled){var n=this.value.slice();n.splice(i,1),this.$emit("input",n),this.emitChange(n),this.$emit("remove-tag",t)}e.stopPropagation()},onInputChange:function(){this.filterable&&this.query!==this.selectedLabel&&(this.query=this.selectedLabel,this.handleQueryChange(this.query))},onOptionDestroy:function(e){e>-1&&(this.optionsCount--,this.filteredOptionsCount--,this.options.splice(e,1))},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()},checkDefaultFirstOption:function(){this.hoverIndex=-1;for(var e=0;e!==this.options.length;++e){var t=this.options[e];if(this.query){if(!t.disabled&&!t.groupDisabled&&t.visible){this.hoverIndex=e;break}}else if(t.itemSelected){this.hoverIndex=e;break}}},getValueKey:function(e){return"[object object]"!==Object.prototype.toString.call(e.value).toLowerCase()?e.value:(0,D.getValueByPath)(e.value,this.valueKey)}},created:function(){var e=this;this.cachedPlaceHolder=this.currentPlaceholder=this.placeholder,this.multiple&&!Array.isArray(this.value)&&this.$emit("input",[]),!this.multiple&&Array.isArray(this.value)&&this.$emit("input",""),this.debouncedOnInputChange=(0,C.default)(this.debounce,function(){e.onInputChange()}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&this.value.length>0&&(this.currentPlaceholder=""),(0,M.addResizeListener)(this.$el,this.handleResize),this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){e.$refs.reference&&e.$refs.reference.$el&&(e.inputWidth=e.$refs.reference.$el.getBoundingClientRect().width)}),this.setSelected()},beforeDestroy:function(){this.$el&&this.handleResize&&(0,M.removeResizeListener)(this.$el,this.handleResize)}}},function(e,t){"use strict";function i(e,t,n){this.$children.forEach(function(s){var o=s.$options.componentName;o===e?s.$emit.apply(s,[t].concat(n)):i.apply(s,[e,t].concat([n]))})}t.__esModule=!0,t.default={methods:{dispatch:function(e,t,i){for(var n=this.$parent||this.$root,s=n.$options.componentName;n&&(!s||s!==e);)n=n.$parent,n&&(s=n.$options.componentName);n&&n.$emit.apply(n,[t].concat(i))},broadcast:function(e,t,n){i.call(this,e,t,n)}}}},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){return{methods:{focus:function(){this.$refs[e].focus()}}}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(15);t.default={methods:{t:function(){for(var e=arguments.length,t=Array(e),i=0;i1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;s||(s=document.createElement("textarea"),document.body.appendChild(s));var r=i(e),a=r.paddingSize,l=r.borderSize,u=r.boxSizing,c=r.contextStyle;s.setAttribute("style",c+";"+o),s.value=e.value||e.placeholder||"";var d=s.scrollHeight;"border-box"===u?d+=l:"content-box"===u&&(d-=a),s.value="";var h=s.scrollHeight-a;if(null!==t){var f=h*t;"border-box"===u&&(f=f+a+l),d=Math.max(f,d)}if(null!==n){var p=h*n;"border-box"===u&&(p=p+a+l),d=Math.min(p,d)}return{height:d+"px"}}t.__esModule=!0,t.default=n;var s=void 0,o="\n height:0 !important;\n visibility:hidden !important;\n overflow:hidden !important;\n position:absolute !important;\n z-index:-1000 !important;\n top:0 !important;\n right:0 !important\n",r=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"]},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){for(var t=1,i=arguments.length;t-1?"center "+i:i+" center"},appendArrow:function(e){var t=void 0;if(!this.appended){this.appended=!0;for(var i in e.attributes)if(/^_v-/.test(e.attributes[i].name)){t=e.attributes[i].name;break}var n=document.createElement("div");t&&n.setAttribute(t,""),n.setAttribute("x-arrow",""),n.className="popper__arrow",e.appendChild(n)}}},beforeDestroy:function(){this.doDestroy(),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",l),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.PopupManager=void 0;var s=i(2),o=n(s),r=i(673),a=n(r),l=i(679),u=n(l),c=i(680),d=n(c),h=i(292),f=1,p=[],m=function(e){if(p.indexOf(e)===-1){var t=function(e){var t=e.__vue__;if(!t){var i=e.previousSibling;i.__vue__&&(t=i.__vue__)}return t};o.default.transition(e,{afterEnter:function(e){var i=t(e);i&&i.doAfterOpen&&i.doAfterOpen()},afterLeave:function(e){var i=t(e);i&&i.doAfterClose&&i.doAfterClose()}})}},v=void 0,g=function e(t){return 3===t.nodeType&&(t=t.nextElementSibling||t.nextSibling,e(t)),t};t.default={props:{visible:{type:Boolean,default:!1},transition:{type:String,default:""},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,default:!1},modalFade:{type:Boolean,default:!0},modalClass:{},modalAppendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!1}},created:function(){this.transition&&m(this.transition)},beforeMount:function(){this._popupId="popup-"+f++,u.default.register(this._popupId,this)},beforeDestroy:function(){u.default.deregister(this._popupId),u.default.closeModal(this._popupId),this.modal&&null!==this.bodyOverflow&&"hidden"!==this.bodyOverflow&&(document.body.style.overflow=this.bodyOverflow,document.body.style.paddingRight=this.bodyPaddingRight),this.bodyOverflow=null,this.bodyPaddingRight=null},data:function(){return{opened:!1,bodyOverflow:null,bodyPaddingRight:null,rendered:!1}},watch:{visible:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,o.default.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0);var i=(0,a.default)({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(i.openDelay);n>0?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(i)},n):this.doOpen(i)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0;var t=g(this.$el),i=e.modal,n=e.zIndex;if(n&&(u.default.zIndex=n),i&&(this._closing&&(u.default.closeModal(this._popupId),this._closing=!1),u.default.openModal(this._popupId,u.default.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.bodyOverflow||(this.bodyPaddingRight=document.body.style.paddingRight,this.bodyOverflow=document.body.style.overflow),v=(0,d.default)();var s=document.documentElement.clientHeight0&&(s||"scroll"===o)&&(document.body.style.paddingRight=v+"px"),document.body.style.overflow="hidden"}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=u.default.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),this.transition||this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);t>0?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){var e=this;this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(function(){e.modal&&"hidden"!==e.bodyOverflow&&(document.body.style.overflow=e.bodyOverflow,document.body.style.paddingRight=e.bodyPaddingRight),e.bodyOverflow=null,e.bodyPaddingRight=null},200),this.opened=!1,this.transition||this.doAfterClose()},doAfterClose:function(){u.default.closeModal(this._popupId),this._closing=!1}}},t.PopupManager=u.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),r=i(292),a=!1,l=function(){if(!o.default.prototype.$isServer){var e=c.modalDom;return e?a=!0:(a=!1,e=document.createElement("div"),c.modalDom=e,e.addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){c.doOnModalClick&&c.doOnModalClick()})),e}},u={},c={zIndex:2e3,modalFade:!0,getInstance:function(e){return u[e]},register:function(e,t){e&&t&&(u[e]=t)},deregister:function(e){e&&(u[e]=null,delete u[e])},nextZIndex:function(){return c.zIndex++},modalStack:[],doOnModalClick:function(){var e=c.modalStack[c.modalStack.length-1];if(e){var t=c.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,i,n,s){if(!o.default.prototype.$isServer&&e&&void 0!==t){this.modalFade=s;for(var u=this.modalStack,c=0,d=u.length;c0){var n=t[t.length-1];if(n.id===e){if(n.modalClass){var s=n.modalClass.trim().split(/\s+/);s.forEach(function(e){return(0,r.removeClass)(i,e)})}t.pop(),t.length>0&&(i.style.zIndex=t[t.length-1].zIndex)}else for(var o=t.length-1;o>=0;o--)if(t[o].id===e){t.splice(o,1);break}}0===t.length&&(this.modalFade&&(0,r.addClass)(i,"v-modal-leave"),setTimeout(function(){0===t.length&&(i.parentNode&&i.parentNode.removeChild(i),i.style.display="none",c.modalDom=void 0),(0,r.removeClass)(i,"v-modal-leave")},200))}},d=function(){if(!o.default.prototype.$isServer&&c.modalStack.length>0){var e=c.modalStack[c.modalStack.length-1];if(!e)return;var t=c.getInstance(e.id);return t}};o.default.prototype.$isServer||window.addEventListener("keydown",function(e){if(27===e.keyCode){var t=d();t&&t.closeOnPressEscape&&(t.handleClose?t.handleClose():t.handleAction?t.handleAction("cancel"):t.close())}}),t.default=c},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(){if(o.default.prototype.$isServer)return 0;if(void 0!==r)return r;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");i.style.width="100%",e.appendChild(i);var n=i.offsetWidth;return e.parentNode.removeChild(e),r=t-n};var s=i(2),o=n(s),r=void 0},function(e,t,i){var n,s;"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(o,r){n=r,s="function"==typeof n?n.call(t,i,t,e):n,!(void 0!==s&&(e.exports=s))}(void 0,function(){"use strict";function e(e,t,i){this._reference=e.jquery?e[0]:e,this.state={};var n="undefined"==typeof t||null===t,s=t&&"[object Object]"===Object.prototype.toString.call(t);return n||s?this._popper=this.parse(s?t:{}):this._popper=t.jquery?t[0]:t,this._options=Object.assign({},v,i),this._options.modifiers=this._options.modifiers.map(function(e){if(this._options.modifiersIgnored.indexOf(e)===-1)return"applyStyle"===e&&this._popper.setAttribute("x-placement",this._options.placement),this.modifiers[e]||e}.bind(this)),this.state.position=this._getPosition(this._popper,this._reference),u(this._popper,{position:this.state.position,top:0}),this.update(),this._setupEventListeners(),this}function t(e){var t=e.style.display,i=e.style.visibility;e.style.display="block",e.style.visibility="hidden";var n=(e.offsetWidth,m.getComputedStyle(e)),s=parseFloat(n.marginTop)+parseFloat(n.marginBottom),o=parseFloat(n.marginLeft)+parseFloat(n.marginRight),r={width:e.offsetWidth+o,height:e.offsetHeight+s};return e.style.display=t,e.style.visibility=i,r}function i(e){var t={left:"right",right:"left",bottom:"top",top:"bottom"};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function n(e){var t=Object.assign({},e);return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function s(e,t){var i,n=0;for(i in e){if(e[i]===t)return n;n++}return null}function o(e,t){var i=m.getComputedStyle(e,null);return i[t]}function r(e){var t=e.offsetParent;return t!==m.document.body&&t?t:m.document.documentElement}function a(e){var t=e.parentNode;return t?t===m.document?m.document.body.scrollTop?m.document.body:m.document.documentElement:["scroll","auto"].indexOf(o(t,"overflow"))!==-1||["scroll","auto"].indexOf(o(t,"overflow-x"))!==-1||["scroll","auto"].indexOf(o(t,"overflow-y"))!==-1?t:a(e.parentNode):e}function l(e){return e!==m.document.body&&("fixed"===o(e,"position")||(e.parentNode?l(e.parentNode):e))}function u(e,t){function i(e){return""!==e&&!isNaN(parseFloat(e))&&isFinite(e)}Object.keys(t).forEach(function(n){var s="";["width","height","top","right","bottom","left"].indexOf(n)!==-1&&i(t[n])&&(s="px"),e.style[n]=t[n]+s})}function c(e){var t={};return e&&"[object Function]"===t.toString.call(e)}function d(e){var t={width:e.offsetWidth,height:e.offsetHeight,left:e.offsetLeft,top:e.offsetTop};return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function h(e){var t=e.getBoundingClientRect(),i=navigator.userAgent.indexOf("MSIE")!=-1,n=i&&"HTML"===e.tagName?-e.scrollTop:t.top;return{left:t.left,top:n,right:t.right,bottom:t.bottom,width:t.right-t.left,height:t.bottom-n}}function f(e,t,i){var n=h(e),s=h(t);if(i){var o=a(t);s.top+=o.scrollTop,s.bottom+=o.scrollTop,s.left+=o.scrollLeft,s.right+=o.scrollLeft}var r={top:n.top-s.top,left:n.left-s.left,bottom:n.top-s.top+n.height,right:n.left-s.left+n.width,width:n.width,height:n.height};return r}function p(e){for(var t=["","ms","webkit","moz","o"],i=0;i1&&console.warn("WARNING: the given `parent` query("+e.parent+") matched more than one element, the first one will be used"),0===a.length)throw"ERROR: the given `parent` doesn't exists!";a=a[0]}return a.length>1&&a instanceof Element==!1&&(console.warn("WARNING: you have passed as parent a list of elements, the first one will be used"),a=a[0]),a.appendChild(o),o},e.prototype._getPosition=function(e,t){var i=r(t);if(this._options.forceAbsolute)return"absolute";var n=l(t,i);return n?"fixed":"absolute"},e.prototype._getOffsets=function(e,i,n){n=n.split("-")[0];var s={};s.position=this.state.position;var o="fixed"===s.position,a=f(i,r(e),o),l=t(e);return["right","left"].indexOf(n)!==-1?(s.top=a.top+a.height/2-l.height/2,"left"===n?s.left=a.left-l.width:s.left=a.right):(s.left=a.left+a.width/2-l.width/2,"top"===n?s.top=a.top-l.height:s.top=a.bottom),s.width=l.width,s.height=l.height,{popper:s,reference:a}},e.prototype._setupEventListeners=function(){if(this.state.updateBound=this.update.bind(this),m.addEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=a(this._reference);e!==m.document.body&&e!==m.document.documentElement||(e=m),e.addEventListener("scroll",this.state.updateBound)}},e.prototype._removeEventListeners=function(){if(m.removeEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=a(this._reference);e!==m.document.body&&e!==m.document.documentElement||(e=m),e.removeEventListener("scroll",this.state.updateBound)}this.state.updateBound=null},e.prototype._getBoundaries=function(e,t,i){var n,s,o={};if("window"===i){var l=m.document.body,u=m.document.documentElement;s=Math.max(l.scrollHeight,l.offsetHeight,u.clientHeight,u.scrollHeight,u.offsetHeight),n=Math.max(l.scrollWidth,l.offsetWidth,u.clientWidth,u.scrollWidth,u.offsetWidth),o={top:0,right:n,bottom:s,left:0}}else if("viewport"===i){var c=r(this._popper),h=a(this._popper),f=d(c),p=function(e){return e==document.body?Math.max(document.documentElement.scrollTop,document.body.scrollTop):e.scrollTop},v=function(e){return e==document.body?Math.max(document.documentElement.scrollLeft,document.body.scrollLeft):e.scrollLeft},g="fixed"===e.offsets.popper.position?0:p(h),y="fixed"===e.offsets.popper.position?0:v(h);o={top:0-(f.top-g),right:m.document.documentElement.clientWidth-(f.left-y),bottom:m.document.documentElement.clientHeight-(f.top-g),left:0-(f.left-y)}}else o=r(this._popper)===i?{top:0,left:0,right:i.clientWidth,bottom:i.clientHeight}:d(i);return o.left+=t,o.right-=t,o.top=o.top+t,o.bottom=o.bottom-t,o},e.prototype.runModifiers=function(e,t,i){var n=t.slice();return void 0!==i&&(n=this._options.modifiers.slice(0,s(this._options.modifiers,i))),n.forEach(function(t){c(t)&&(e=t.call(this,e))}.bind(this)),e},e.prototype.isModifierRequired=function(e,t){var i=s(this._options.modifiers,e);return!!this._options.modifiers.slice(0,i).filter(function(e){return e===t}).length},e.prototype.modifiers={},e.prototype.modifiers.applyStyle=function(e){var t,i={position:e.offsets.popper.position},n=Math.round(e.offsets.popper.left),s=Math.round(e.offsets.popper.top);return this._options.gpuAcceleration&&(t=p("transform"))?(i[t]="translate3d("+n+"px, "+s+"px, 0)",i.top=0,i.left=0):(i.left=n,i.top=s),Object.assign(i,e.styles),u(this._popper,i),this._popper.setAttribute("x-placement",e.placement),this.isModifierRequired(this.modifiers.applyStyle,this.modifiers.arrow)&&e.offsets.arrow&&u(e.arrowElement,e.offsets.arrow),e},e.prototype.modifiers.shift=function(e){var t=e.placement,i=t.split("-")[0],s=t.split("-")[1];if(s){var o=e.offsets.reference,r=n(e.offsets.popper),a={y:{start:{top:o.top},end:{top:o.top+o.height-r.height}},x:{start:{left:o.left},end:{left:o.left+o.width-r.width}}},l=["bottom","top"].indexOf(i)!==-1?"x":"y";e.offsets.popper=Object.assign(r,a[l][s])}return e},e.prototype.modifiers.preventOverflow=function(e){var t=this._options.preventOverflowOrder,i=n(e.offsets.popper),s={left:function t(){var t=i.left;return i.lefte.boundaries.right&&(t=Math.min(i.left,e.boundaries.right-i.width)),{left:t}},top:function t(){var t=i.top;return i.tope.boundaries.bottom&&(t=Math.min(i.top,e.boundaries.bottom-i.height)),{top:t}}};return t.forEach(function(t){e.offsets.popper=Object.assign(i,s[t]())}),e},e.prototype.modifiers.keepTogether=function(e){var t=n(e.offsets.popper),i=e.offsets.reference,s=Math.floor;return t.rights(i.right)&&(e.offsets.popper.left=s(i.right)),t.bottoms(i.bottom)&&(e.offsets.popper.top=s(i.bottom)),e},e.prototype.modifiers.flip=function(e){if(!this.isModifierRequired(this.modifiers.flip,this.modifiers.preventOverflow))return console.warn("WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!"), -e;if(e.flipped&&e.placement===e._originalPlacement)return e;var t=e.placement.split("-")[0],s=i(t),o=e.placement.split("-")[1]||"",r=[];return r="flip"===this._options.flipBehavior?[t,s]:this._options.flipBehavior,r.forEach(function(a,l){if(t===a&&r.length!==l+1){t=e.placement.split("-")[0],s=i(t);var u=n(e.offsets.popper),c=["right","bottom"].indexOf(t)!==-1;(c&&Math.floor(e.offsets.reference[t])>Math.floor(u[s])||!c&&Math.floor(e.offsets.reference[t])r[h]&&(e.offsets.popper[c]+=a[c]+f-r[h]);var p=a[c]+a[u]/2-f/2,m=p-r[c];return m=Math.max(Math.min(r[u]-f-3,m),3),s[c]=m,s[d]="",e.offsets.arrow=s,e.arrowElement=i,e},Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e){if(void 0===e||null===e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),i=1;i=this.select.multipleLimit&&this.select.multipleLimit>0)}},watch:{currentLabel:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")},value:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")}},methods:{isEqual:function(e,t){if(this.isObject){var i=this.select.valueKey;return(0,a.getValueByPath)(e,i)===(0,a.getValueByPath)(t,i)}return e===t},contains:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],i=arguments[1];if(!this.isObject)return t.indexOf(i)>-1;var n=function(){var n=e.select.valueKey;return{v:t.some(function(e){return(0,a.getValueByPath)(e,n)===(0,a.getValueByPath)(i,n)})}}();return"object"===("undefined"==typeof n?"undefined":s(n))?n.v:void 0},handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.select.hoverIndex=this.select.options.indexOf(this))},selectOptionClick:function(){this.disabled!==!0&&this.groupDisabled!==!0&&this.dispatch("ElSelect","handleOptionClick",this)},queryChange:function(e){var t=String(e).replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g,"\\$1");this.visible=new RegExp(t,"i").test(this.currentLabel)||this.created,this.visible||this.select.filteredOptionsCount--}},created:function(){this.select.options.push(this),this.select.cachedOptions.push(this),this.select.optionsCount++,this.select.filteredOptionsCount++,this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled)},beforeDestroy:function(){this.select.onOptionDestroy(this.select.options.indexOf(this))}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-dropdown__item",class:{selected:e.itemSelected,"is-disabled":e.disabled||e.groupDisabled||e.limitReached,hover:e.hover},on:{mouseenter:e.hoverItem,click:function(t){t.stopPropagation(),e.selectOptionClick(t)}}},[e._t("default",[i("span",[e._v(e._s(e.currentLabel))])])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(687),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(688),i(689),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,disableTransitions:Boolean,color:String,size:String},methods:{handleClose:function(e){this.$emit("close",e)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:e.disableTransitions?"":"el-zoom-in-center"}},[i("span",{staticClass:"el-tag",class:[e.type?"el-tag--"+e.type:"",e.size&&"el-tag--"+e.size,{"is-hit":e.hit}],style:{backgroundColor:e.color}},[e._t("default"),e.closable?i("i",{staticClass:"el-tag__close el-icon-close",on:{click:e.handleClose}}):e._e()],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(691),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(692),o=i(680),r=n(o),a=i(19),l=i(693),u=n(l);t.default={name:"ElScrollbar",components:{Bar:u.default},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(e){var t=(0,r.default)(),i=this.wrapStyle;if(t){var n="-"+t+"px",s="margin-bottom: "+n+"; margin-right: "+n+";";Array.isArray(this.wrapStyle)?(i=(0,a.toObject)(this.wrapStyle),i.marginRight=i.marginBottom=n):"string"==typeof this.wrapStyle?i+=s:i=s}var o=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),l=e("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[o]]),c=void 0;return c=this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[o]])]:[l,e(u.default,{attrs:{move:this.moveX,size:this.sizeWidth}},[]),e(u.default,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}},[])],e("div",{class:"el-scrollbar"},c)},methods:{handleScroll:function(){var e=this.wrap;this.moveY=100*e.scrollTop/e.clientHeight,this.moveX=100*e.scrollLeft/e.clientWidth},update:function(){var e=void 0,t=void 0,i=this.wrap;i&&(e=100*i.clientHeight/i.scrollHeight,t=100*i.clientWidth/i.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&(0,s.addResizeListener)(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&(0,s.removeResizeListener)(this.$refs.resize,this.update)}}},function(e,t){"use strict";t.__esModule=!0;var i="undefined"==typeof window,n=function(){if(!i){var e=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){return window.setTimeout(e,20)};return function(t){return e(t)}}}(),s=function(){if(!i){var e=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.clearTimeout;return function(t){return e(t)}}}(),o=function(e){var t=e.__resizeTrigger__,i=t.firstElementChild,n=t.lastElementChild,s=i.firstElementChild;n.scrollLeft=n.scrollWidth,n.scrollTop=n.scrollHeight,s.style.width=i.offsetWidth+1+"px",s.style.height=i.offsetHeight+1+"px",i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight},r=function(e){return e.offsetWidth!==e.__resizeLast__.width||e.offsetHeight!==e.__resizeLast__.height},a=function(e){var t=this;o(this),this.__resizeRAF__&&s(this.__resizeRAF__),this.__resizeRAF__=n(function(){r(t)&&(t.__resizeLast__.width=t.offsetWidth,t.__resizeLast__.height=t.offsetHeight,t.__resizeListeners__.forEach(function(i){i.call(t,e)}))})},l=i?{}:document.attachEvent,u="Webkit Moz O ms".split(" "),c="webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),d="resizeanim",h=!1,f="",p="animationstart";if(!l&&!i){var m=document.createElement("fakeelement");if(void 0!==m.style.animationName&&(h=!0),h===!1)for(var v="",g=0;g div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1 }\n .resize-triggers > div { background: #eee; overflow: auto; }\n .contract-trigger:before { width: 200%; height: 200%; }',s=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n)),s.appendChild(o),y=!0}};t.addResizeListener=function(e,t){if(!i)if(l)e.attachEvent("onresize",t);else{if(!e.__resizeTrigger__){"static"===getComputedStyle(e).position&&(e.style.position="relative"),b(),e.__resizeLast__={},e.__resizeListeners__=[];var n=e.__resizeTrigger__=document.createElement("div");n.className="resize-triggers",n.innerHTML='
',e.appendChild(n),o(e),e.addEventListener("scroll",a,!0),p&&n.addEventListener(p,function(t){t.animationName===d&&o(e)})}e.__resizeListeners__.push(t)}},t.removeResizeListener=function(e,t){l?e.detachEvent("onresize",t):(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||(e.removeEventListener("scroll",a),e.__resizeTrigger__=!e.removeChild(e.__resizeTrigger__)))}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(292),s=i(694);t.default={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return s.BAR_MAP[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t=this.size,i=this.move,n=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+n.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:(0,s.renderThumbStyle)({size:t,move:i,bar:n})},[])])},methods:{clickThumbHandler:function(e){this.startDrag(e),this[this.bar.axis]=e.currentTarget[this.bar.offset]-(e[this.bar.client]-e.currentTarget.getBoundingClientRect()[this.bar.direction])},clickTrackHandler:function(e){var t=Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client]),i=this.$refs.thumb[this.bar.offset]/2,n=100*(t-i)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=n*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,(0,n.on)(document,"mousemove",this.mouseMoveDocumentHandler),(0,n.on)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(this.cursorDown!==!1){var t=this[this.bar.axis];if(t){var i=(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])*-1,n=this.$refs.thumb[this.bar.offset]-t,s=100*(i-n)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=s*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,(0,n.off)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){(0,n.off)(document,"mouseup",this.mouseUpDocumentHandler)}}},function(e,t){"use strict";function i(e){var t=e.move,i=e.size,n=e.bar,s={},o="translate"+n.axis+"("+t+"%)";return s[n.size]=i,s.transform=o,s.msTransform=o,s.webkitTransform=o,s}t.__esModule=!0,t.renderThumbStyle=i;t.BAR_MAP={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}}},function(e,t,i){var n=i(43);e.exports=function(e,t,i){return void 0===i?n(e,t,!1):n(e,i,t!==!1)}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),r=i(292),a=[],l="@@clickoutsideContext",u=void 0,c=0;!o.default.prototype.$isServer&&(0,r.on)(document,"mousedown",function(e){return u=e}),!o.default.prototype.$isServer&&(0,r.on)(document,"mouseup",function(e){a.forEach(function(t){return t[l].documentHandler(e,u)})}),t.default={bind:function(e,t,i){a.push(e);var n=c++,s=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!(i.context&&n.target&&s.target)||e.contains(n.target)||e.contains(s.target)||e===n.target||i.context.popperElm&&(i.context.popperElm.contains(n.target)||i.context.popperElm.contains(s.target))||(t.expression&&e[l].methodName&&i.context[e[l].methodName]?i.context[e[l].methodName]():e[l].bindingFn&&e[l].bindingFn())};e[l]={id:n,documentHandler:s,methodName:t.expression,bindingFn:t.value}},update:function(e,t){e[l].methodName=t.expression,e[l].bindingFn=t.value},unbind:function(e){for(var t=a.length,i=0;io&&(e.scrollTop=n-e.clientHeight)}}t.__esModule=!0,t.default=s;var o=i(2),r=n(o)},function(e,t){"use strict";t.__esModule=!0,t.default={data:function(){return{hoverOption:-1}},computed:{optionsAllDisabled:function(){return this.options.length===this.options.filter(function(e){return e.disabled===!0}).length}},watch:{hoverIndex:function(e){var t=this;"number"==typeof e&&e>-1&&(this.hoverOption=this.options[e]||{}),this.options.forEach(function(e){e.hover=t.hoverOption===e})}},methods:{navigateOptions:function(e){var t=this;if(!this.visible)return void(this.visible=!0);if(0!==this.options.length&&0!==this.filteredOptionsCount){if(!this.optionsAllDisabled){"next"===e?(this.hoverIndex++,this.hoverIndex===this.options.length&&(this.hoverIndex=0)):"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1));var i=this.options[this.hoverIndex];i.disabled!==!0&&i.groupDisabled!==!0&&i.visible||this.navigateOptions(e)}this.$nextTick(function(){return t.scrollToOption(t.hoverOption)})}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],staticClass:"el-select",class:[e.size?"el-select--"+e.size:""]},[e.multiple?i("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":e.inputWidth-32+"px"},on:{click:function(t){t.stopPropagation(),e.toggleMenu(t)}}},[i("transition-group",{on:{"after-leave":e.resetInputHeight}},e._l(e.selected,function(t){return i("el-tag",{key:e.getValueKey(t),attrs:{closable:!e.disabled,size:"small",hit:t.hitState,type:"info","close-transition":""},on:{close:function(i){e.deleteTag(i,t)}}},[i("span",{staticClass:"el-select__tags-text"},[e._v(e._s(t.currentLabel))])])})),e.filterable?i("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:"is-"+e.size,style:{width:e.inputLength+"px","max-width":e.inputWidth-42+"px"},attrs:{type:"text",disabled:e.disabled,debounce:e.remote?300:0},domProps:{value:e.query},on:{focus:function(t){e.visible=!0},keyup:e.managePlaceholder,keydown:[e.resetInputState,function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.navigateOptions("next")):null},function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.navigateOptions("prev")):null},function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?(t.preventDefault(),void e.selectOption(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"esc",27)?(t.stopPropagation(),t.preventDefault(),void(e.visible=!1)):null},function(t){return"button"in t||!e._k(t.keyCode,"delete",[8,46])?void e.deletePrevTag(t):null}],input:[function(t){t.target.composing||(e.query=t.target.value)},function(t){return e.handleQueryChange(t.target.value)}]}}):e._e()],1):e._e(),i("el-input",{ref:"reference",class:{"is-focus":e.visible},attrs:{type:"text",placeholder:e.currentPlaceholder,name:e.name,size:e.size,disabled:e.disabled,readonly:!e.filterable||e.multiple,"validate-event":!1},on:{focus:e.handleFocus,blur:e.handleBlur},nativeOn:{mousedown:function(t){e.handleMouseDown(t)},keyup:function(t){e.debouncedOnInputChange(t)},keydown:[function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.navigateOptions("next")):null},function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.navigateOptions("prev")):null},function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?(t.preventDefault(),void e.selectOption(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"esc",27)?(t.stopPropagation(),t.preventDefault(),void(e.visible=!1)):null},function(t){return"button"in t||!e._k(t.keyCode,"tab",9)?void(e.visible=!1):null}],paste:function(t){e.debouncedOnInputChange(t)},mouseenter:function(t){e.inputHovering=!0},mouseleave:function(t){e.inputHovering=!1}},model:{value:e.selectedLabel,callback:function(t){e.selectedLabel=t},expression:"selectedLabel"}},[i("i",{class:["el-select__caret","el-input__icon","el-icon-"+e.iconClass],on:{click:e.handleIconClick},slot:"suffix"})]),i("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":e.handleMenuEnter,"after-leave":e.doDestroy}},[i("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:e.visible&&e.emptyText!==!1,expression:"visible && emptyText !== false"}],ref:"popper"},[i("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.options.length>0&&!e.loading,expression:"options.length > 0 && !loading"}],class:{"is-empty":!e.allowCreate&&0===e.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[e.showNewOption?i("el-option",{attrs:{value:e.query,created:""}}):e._e(),e._t("default")],2),e.emptyText&&(e.allowCreate&&0===e.options.length||!e.allowCreate)?i("p",{staticClass:"el-select-dropdown__empty"},[e._v(e._s(e.emptyText))]):e._e()],1)],1)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(683),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(702),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(703),i(704),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(678),o=n(s),r=i(666),a=n(r);t.default={name:"ElDialog",mixins:[o.default,a.default],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},width:String,fullscreen:Boolean,customClass:{type:String,default:""},top:{type:String,default:"15vh"},beforeClose:Function,center:{type:Boolean,default:!1}},data:function(){return{closed:!1}},watch:{visible:function(e){var t=this;this.$emit("update:visible",e),e?(this.closed=!1,this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0}),this.appendToBody&&document.body.appendChild(this.$el)):(this.$el.removeEventListener("scroll",this.updatePopper),this.closed||this.$emit("close"))}},computed:{style:function e(){var e={};return this.width&&(e.width=this.width),this.fullscreen||(e.marginTop=this.top),e}},methods:{handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.hide):this.hide()},hide:function(e){e!==!1&&(this.$emit("update:visible",!1),this.$emit("close"),this.closed=!0)},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")}},mounted:function(){this.visible&&(this.rendered=!0,this.open(),this.appendToBody&&document.body.appendChild(this.$el))}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"dialog-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-dialog__wrapper",on:{click:function(t){return t.target!==t.currentTarget?null:void e.handleWrapperClick(t)}}},[i("div",{ref:"dialog",staticClass:"el-dialog",class:[{"is-fullscreen":e.fullscreen,"el-dialog--center":e.center},e.customClass],style:e.style},[i("div",{staticClass:"el-dialog__header"},[e._t("title",[i("span",{staticClass:"el-dialog__title"},[e._v(e._s(e.title))])]),e.showClose?i("button",{staticClass:"el-dialog__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:e.handleClose}},[i("i",{staticClass:"el-dialog__close el-icon el-icon-close"})]):e._e()],2),e.rendered?i("div",{staticClass:"el-dialog__body"},[e._t("default")],2):e._e(),e.$slots.footer?i("div",{staticClass:"el-dialog__footer"},[e._t("footer")],2):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(706),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(707),i(711),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(669),o=n(s),r=i(696),a=n(r),l=i(708),u=n(l),c=i(666),d=n(c),h=i(19);t.default={name:"ElAutocomplete",mixins:[d.default],componentName:"ElAutocomplete",components:{ElInput:o.default,ElAutocompleteSuggestions:u.default},directives:{Clickoutside:a.default},props:{props:{type:Object,default:function(){return{label:"value",value:"value"}}},popperClass:String,placeholder:String,disabled:Boolean,name:String,size:String,value:String,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,icon:String,onIconClick:Function,selectWhenUnmatched:{type:Boolean,default:!1},label:String},data:function(){return{activated:!1,isOnComposition:!1,suggestions:[],loading:!1,highlightedIndex:-1}},computed:{suggestionVisible:function(){var e=this.suggestions,t=Array.isArray(e)&&e.length>0;return(t||this.loading)&&this.activated},id:function(){return"el-autocomplete-"+(0,h.generateId)()}},watch:{suggestionVisible:function(e){this.broadcast("ElAutocompleteSuggestions","visible",[e,this.$refs.input.$refs.input.offsetWidth])}},methods:{getData:function(e){var t=this;this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,Array.isArray(e)?t.suggestions=e:console.error("autocomplete suggestions must be an array")})},handleComposition:function(e){"compositionend"===e.type?(this.isOnComposition=!1,this.handleChange(this.value)):this.isOnComposition=!0},handleChange:function(e){return this.$emit("input",e),this.isOnComposition||!this.triggerOnFocus&&!e?void(this.suggestions=[]):void this.getData(e)},handleFocus:function(e){this.activated=!0,this.$emit("focus",e),this.triggerOnFocus&&this.getData(this.value)},handleBlur:function(e){this.$emit("blur",e)},close:function(e){this.activated=!1},handleKeyEnter:function(e){var t=this;this.suggestionVisible&&this.highlightedIndex>=0&&this.highlightedIndex=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".el-autocomplete-suggestion__list li"),n=i[e],s=t.scrollTop,o=n.offsetTop;o+n.scrollHeight>s+t.clientHeight&&(t.scrollTop+=n.scrollHeight),o=0;t--)e.splice(t,0,e[t]);e=e.join("")}return/^[1-9a-fA-F]{6}$/.test(e)?{red:parseInt(e.slice(0,2),16),green:parseInt(e.slice(2,4),16),blue:parseInt(e.slice(4,6),16)}:{red:255,green:255,blue:255}},mixColor:function(e,t){var i=this.getColorChannels(e),n=i.red,s=i.green,o=i.blue;return t>0?(n*=1-t,s*=1-t,o*=1-t):(n+=(255-n)*t,s+=(255-s)*t,o+=(255-o)*t),"rgb("+Math.round(n)+", "+Math.round(s)+", "+Math.round(o)+")"},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var i=this.openedMenus;i.indexOf(e)===-1&&(this.uniqueOpened&&(this.openedMenus=i.filter(function(e){return t.indexOf(e)!==-1})),this.openedMenus.push(e))},closeMenu:function(e){this.openedMenus.splice(this.openedMenus.indexOf(e),1)},handleSubmenuClick:function(e){var t=e.index,i=e.indexPath,n=this.openedMenus.indexOf(t)!==-1;n?(this.closeMenu(t),this.$emit("close",t,i)):(this.openMenu(t,i),this.$emit("open",t,i))},handleItemClick:function(e){var t=e.index,i=e.indexPath;this.activeIndex=e.index,this.$emit("select",t,i,e),("horizontal"===this.mode||this.collapse)&&(this.openedMenus=[]),this.router&&this.routeToItem(e)},initOpenedMenu:function(){var e=this,t=this.activeIndex,i=this.items[t];if(i&&"horizontal"!==this.mode&&!this.collapse){var n=i.indexPath;n.forEach(function(t){var i=e.submenus[t];i&&e.openMenu(t,i.indexPath)})}},routeToItem:function(e){var t=e.route||e.index;try{this.$router.push(t)}catch(e){console.error(e)}}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick),"horizontal"===this.mode&&new a.default(this.$el)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(735),o=n(s),r=function(e){this.domNode=e,this.init()};r.prototype.init=function(){var e=this.domNode.childNodes;[].filter.call(e,function(e){return 1===e.nodeType}).forEach(function(e){new o.default(e)})},t.default=r},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(736),o=n(s),r=i(737),a=n(r),l=function(e){this.domNode=e,this.submenu=null,this.init()};l.prototype.init=function(){this.domNode.setAttribute("tabindex","0");var e=this.domNode.querySelector(".el-menu");e&&(this.submenu=new a.default(this,e)),this.addListeners()},l.prototype.addListeners=function(){var e=this,t=o.default.keys;this.domNode.addEventListener("keydown",function(i){var n=!1;switch(i.keyCode){case t.down:o.default.triggerEvent(i.currentTarget,"mouseenter"),e.submenu.gotoSubIndex(0),n=!0;break;case t.up:o.default.triggerEvent(i.currentTarget,"mouseenter"),e.submenu.gotoSubIndex(e.submenu.subMenuItems.length-1),n=!0;break;case t.tab:o.default.triggerEvent(i.currentTarget,"mouseleave");break;case t.enter:case t.space:n=!0,i.currentTarget.click()}n&&i.preventDefault()})},t.default=l},function(e,t){"use strict";t.__esModule=!0;var i=i||{};i.Utils=i.Utils||{},i.Utils.focusFirstDescendant=function(e){for(var t=0;t=0;t--){var n=e.childNodes[t];if(i.Utils.attemptFocus(n)||i.Utils.focusLastDescendant(n))return!0}return!1},i.Utils.attemptFocus=function(e){if(!i.Utils.isFocusable(e))return!1;i.Utils.IgnoreUtilFocusChanges=!0;try{e.focus()}catch(e){}return i.Utils.IgnoreUtilFocusChanges=!1,document.activeElement===e},i.Utils.isFocusable=function(e){if(e.tabIndex>0||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!==e.rel;case"INPUT":return"hidden"!==e.type&&"file"!==e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},i.Utils.triggerEvent=function(e,t){var i=void 0;i=/^mouse|click/.test(t)?"MouseEvents":/^key/.test(t)?"KeyboardEvent":"HTMLEvents";for(var n=document.createEvent(i),s=arguments.length,o=Array(s>2?s-2:0),r=2;r-1},active:function(){var e=!1,t=this.submenus,i=this.items;return Object.keys(i).forEach(function(t){i[t].active&&(e=!0)}),Object.keys(t).forEach(function(i){t[i].active&&(e=!0)}),e},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},titleStyle:function(){return"horizontal"!==this.mode?{color:this.textColor}:{borderBottomColor:this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent",color:this.active?this.activeTextColor:this.textColor}}},methods:{addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},handleClick:function(){var e=this.rootMenu;"hover"===e.menuTrigger&&"horizontal"===e.mode||e.collapse&&"vertical"===e.mode||this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.openMenu(e.index,e.indexPath)},300))},handleMouseleave:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.closeMenu(e.index)},300))},handleTitleMouseenter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$refs["submenu-title"].style.backgroundColor=this.rootMenu.hoverBackground)},handleTitleMouseleave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$refs["submenu-title"].style.backgroundColor=this.rootMenu.backgroundColor||"")}},created:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this)},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)}}},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var s=i(292),o=function(){function e(){n(this,e)}return e.prototype.beforeEnter=function(e){(0,s.addClass)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?(e.style.height=e.scrollHeight+"px",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom):(e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom),e.style.overflow="hidden"},e.prototype.afterEnter=function(e){(0,s.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&((0,s.addClass)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){(0,s.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}();t.default={name:"ElCollapseTransition",functional:!0,render:function(e,t){var i=t.children,n={on:new o};return e("transition",n,i)}}},function(e,t){"use strict";t.__esModule=!0,t.default={computed:{indexPath:function(){for(var e=[this.index],t=this.$parent;"ElMenu"!==t.$options.componentName;)t.index&&e.unshift(t.index),t=t.$parent;return e},rootMenu:function(){for(var e=this.$parent;e&&"ElMenu"!==e.$options.componentName;)e=e.$parent;return e},parentMenu:function(){for(var e=this.$parent;e&&["ElMenu","ElSubmenu"].indexOf(e.$options.componentName)===-1;)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};var e=20,t=this.$parent;if(this.rootMenu.collapse)e=20;else for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{class:{"el-submenu":!0,"is-active":e.active,"is-opened":e.opened},attrs:{role:"menuitem","aria-haspopup":"true","aria-expanded":e.opened},on:{mouseenter:e.handleMouseenter,mouseleave:e.handleMouseleave,focus:e.handleMouseenter}},[i("div",{ref:"submenu-title",staticClass:"el-submenu__title",style:[e.paddingStyle,e.titleStyle,{backgroundColor:e.backgroundColor}],on:{click:e.handleClick,mouseenter:e.handleTitleMouseenter,mouseleave:e.handleTitleMouseleave}},[e._t("title"),i("i",{class:{"el-submenu__icon-arrow":!0,"el-icon-arrow-down":"horizontal"===e.rootMenu.mode||"vertical"===e.rootMenu.mode&&!e.rootMenu.collapse,"el-icon-arrow-right":"vertical"===e.rootMenu.mode&&e.rootMenu.collapse}})],2),"horizontal"===e.rootMenu.mode||"vertical"===e.rootMenu.mode&&e.rootMenu.collapse?[i("transition",{attrs:{name:e.menuTransitionName}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.opened,expression:"opened"}],staticClass:"el-menu",style:{backgroundColor:e.rootMenu.backgroundColor||""},attrs:{role:"menu"}},[e._t("default")],2)])]:i("el-collapse-transition",[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.opened,expression:"opened"}],staticClass:"el-menu",style:{backgroundColor:e.rootMenu.backgroundColor||""},attrs:{role:"menu"}},[e._t("default")],2)])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(746),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(747),i(748),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(743),o=n(s),r=i(666),a=n(r);t.default={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[o.default,a.default],props:{index:{type:String,required:!0},route:{type:Object,required:!1},disabled:{type:Boolean,required:!1}},computed:{active:function(){return this.index===this.rootMenu.activeIndex},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},itemStyle:function(){var e={color:this.active?this.activeTextColor:this.textColor};return"horizontal"!==this.mode||this.isNested||(e.borderBottomColor=this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent"),e},isNested:function(){return this.parentMenu!==this.rootMenu}},methods:{onMouseEnter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.hoverBackground)},onMouseLeave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.backgroundColor)},handleClick:function(){this.dispatch("ElMenu","item-click",this),this.$emit("click",this)}},created:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:[e.paddingStyle,e.itemStyle,{backgroundColor:e.backgroundColor}],attrs:{role:"menuitem",tabindex:"-1"},on:{click:e.handleClick,mouseenter:e.onMouseEnter,focus:e.onMouseEnter,blur:e.onMouseLeave,mouseleave:e.onMouseLeave}},[e.$parent===e.rootMenu&&e.rootMenu.collapse?i("el-tooltip",{attrs:{effect:"dark",placement:"right"}},[i("div",{slot:"content"},[e._t("title")],2),i("div",{staticStyle:{position:"absolute",left:"0",top:"0",height:"100%",width:"100%",display:"inline-block","box-sizing":"border-box",padding:"0 20px"}},[e._t("default")],2)]):[e._t("default"),e._t("title")]],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(750),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(751),i(752),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",inject:["rootMenu"],props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){var e=20,t=this.$parent;if(this.rootMenu.collapse)return 20;for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return e}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item-group"},[i("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:e.levelPadding+"px"}},[e.$slots.title?e._t("title"):[e._v(e._s(e.title))]],2),i("ul",[e._t("default")],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(754),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(755),i(756),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(669),o=n(s),r=i(292),a=i(695),l=n(a),u=i(667),c=n(u);t.default={name:"ElInputNumber",mixins:[(0,c.default)("input")],directives:{repeatClick:{bind:function(e,t,i){var n=null,s=void 0,o=function(){return i.context[t.expression].apply()},a=function(){new Date-s<100&&o(),clearInterval(n),n=null};(0,r.on)(e,"mousedown",function(){s=new Date,(0,r.once)(document,"mouseup",a),clearInterval(n),n=setInterval(o,100)})}}},components:{ElInput:o.default},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-(1/0)},value:{default:0},disabled:Boolean,size:String,controls:{type:Boolean,default:!0},controlsPosition:{type:String,default:""},debounce:{type:Number,default:300},name:String,label:String},data:function(){return{currentValue:0}},watch:{value:{immediate:!0,handler:function(e){var t=Number(e);isNaN(t)||(t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.$emit("input",t))}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)this.max},precision:function(){var e=this.value,t=this.step,i=this.getPrecision;return Math.max(i(e),i(t))},controlsAtRight:function(){return"right"===this.controlsPosition}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.precision),parseFloat(parseFloat(Number(e).toFixed(t)))},getPrecision:function(e){var t=e.toString(),i=t.indexOf("."),n=0;return i!==-1&&(n=t.length-i-1),n},_increase:function(e,t){if("number"!=typeof e)return this.currentValue;var i=Math.pow(10,this.precision);return this.toPrecision((i*e+i*t)/i)},_decrease:function(e,t){if("number"!=typeof e)return this.currentValue;var i=Math.pow(10,this.precision);return this.toPrecision((i*e-i*t)/i)},increase:function(){if(!this.disabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);t>this.max||this.setCurrentValue(t)}},decrease:function(){if(!this.disabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);t=this.max&&(e=this.max),e<=this.min&&(e=this.min),t===e?void this.$refs.input.setCurrentValue(this.currentValue):(this.$emit("change",e,t),this.$emit("input",e),void(this.currentValue=e))},handleInput:function(e){if(""!==e){var t=Number(e);isNaN(t)?this.$refs.input.setCurrentValue(this.currentValue):this.setCurrentValue(t)}}},created:function(){var e=this;this.debounceHandleInput=(0,l.default)(this.debounce,function(t){e.handleInput(t)})},mounted:function(){var e=this.$refs.input.$refs.input;e.setAttribute("role","spinbutton"),e.setAttribute("aria-valuemax",this.max),e.setAttribute("aria-valuemin",this.min),e.setAttribute("aria-valuenow",this.currentValue),e.setAttribute("aria-disabled",this.disabled)},updated:function(){var e=this.$refs.input.$refs.input;e.setAttribute("aria-valuenow",this.currentValue)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-input-number",class:[e.size?"el-input-number--"+e.size:"",{"is-disabled":e.disabled},{"is-without-controls":!e.controls},{"is-controls-right":e.controlsAtRight}]},[e.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":e.minDisabled},attrs:{role:"button"},on:{keydown:function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?void e.decrease(t):null}}},[i("i",{class:"el-icon-"+(e.controlsAtRight?"arrow-down":"minus")})]):e._e(),e.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":e.maxDisabled},attrs:{role:"button"},on:{keydown:function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?void e.increase(t):null}}},[i("i",{class:"el-icon-"+(e.controlsAtRight?"arrow-up":"plus")})]):e._e(),i("el-input",{ref:"input",attrs:{value:e.currentValue,disabled:e.disabled,size:e.size,max:e.max,min:e.min,name:e.name,label:e.label},on:{blur:e.handleBlur,focus:e.handleFocus,input:e.debounceHandleInput},nativeOn:{keydown:[function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.increase(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.decrease(t)):null}]}},[e.$slots.prepend?i("template",{slot:"prepend"},[e._t("prepend")],2):e._e(),e.$slots.append?i("template",{slot:"append"},[e._t("append")],2):e._e()],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(758),o=n(s);o.default.install=function(e){e.component("el-radio",o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(759),i(760),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(666),o=n(s);t.default={name:"ElRadio",mixins:[o.default],componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String,border:Boolean,size:String},data:function(){return{focus:!1}},computed:{isGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return this._radioGroup=e,!0;e=e.$parent}return!1},model:{get:function(){return this.isGroup?this._radioGroup.value:this.value},set:function(e){this.isGroup?this.dispatch("ElRadioGroup","input",[e]):this.$emit("input",e)}},radioSize:function(){return this.isGroup?this._radioGroup.size||this.size:this.size},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled:this.disabled},tabIndex:function(){return this.isDisabled?-1:this.isGroup?this.model===this.label?0:-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.model),e.isGroup&&e.dispatch("ElRadioGroup","handleChange",e.model)})}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-radio",class:[e.border&&e.radioSize?"el-radio--"+e.radioSize:"",{"is-disabled":e.isDisabled},{"is-bordered":e.border},{"is-checked":e.model===e.label}],attrs:{role:"radio","aria-checked":e.model===e.label,"aria-disabled":e.isDisabled,tabindex:e.tabIndex},on:{keydown:function(t){return"button"in t||!e._k(t.keyCode,"space",32)?(t.stopPropagation(),t.preventDefault(),void(e.model=e.label)):null}}},[i("span",{staticClass:"el-radio__input",class:{"is-disabled":e.isDisabled,"is-checked":e.model===e.label,"is-focus":e.focus}},[i("span",{staticClass:"el-radio__inner"}),i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio",name:e.name,disabled:e.isDisabled,tabindex:"-1"},domProps:{value:e.label,checked:e._q(e.model,e.label)},on:{focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},change:e.handleChange,__c:function(t){ -e.model=e.label}}})]),i("span",{staticClass:"el-radio__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(762),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(763),i(764),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(666),o=n(s),r=Object.freeze({LEFT:37,UP:38,RIGHT:39,DOWN:40});t.default={name:"ElRadioGroup",componentName:"ElRadioGroup",mixins:[o.default],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},created:function(){var e=this;this.$on("handleChange",function(t){e.$emit("change",t)})},mounted:function(){var e=this.$el.querySelectorAll("[type=radio]");[].some.call(e,function(e){return e.checked})||(this.$el.querySelectorAll("[role=radio]")[0].tabIndex=0)},methods:{handleKeydown:function(e){var t=e.target,i="INPUT"===t.nodeName?"[type=radio]":"[role=radio]",n=this.$el.querySelectorAll(i),s=n.length,o=[].indexOf.call(n,t),a=this.$el.querySelectorAll("[role=radio]");switch(e.keyCode){case r.LEFT:case r.UP:e.stopPropagation(),e.preventDefault(),0===o?a[s-1].click():a[o-1].click();break;case r.RIGHT:case r.DOWN:o===s-1?(e.stopPropagation(),e.preventDefault(),a[0].click()):a[o+1].click()}}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[this.value])}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-radio-group",attrs:{role:"radiogroup"},on:{keydown:e.handleKeydown}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(766),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(767),i(768),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(666),o=n(s);t.default={name:"ElRadioButton",mixins:[o.default],props:{label:{},disabled:Boolean,name:String},computed:{value:{get:function(){return this._radioGroup.value},set:function(e){this._radioGroup.$emit("input",e)}},_radioGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return e;e=e.$parent}return!1},activeStyle:function(){return{backgroundColor:this._radioGroup.fill||"",borderColor:this._radioGroup.fill||"",boxShadow:this._radioGroup.fill?"-1px 0 0 0 "+this._radioGroup.fill:"",color:this._radioGroup.textColor||""}},size:function(){return this._radioGroup.size},isDisabled:function(){return this.disabled||this._radioGroup.disabled},tabIndex:function(){return this.isDisabled?-1:this._radioGroup?this.value===this.label?0:-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.dispatch("ElRadioGroup","handleChange",e.value)})}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-radio-button",class:[e.size?"el-radio-button--"+e.size:"",{"is-active":e.value===e.label},{"is-disabled":e.isDisabled}],attrs:{role:"radio","aria-checked":e.value===e.label,"aria-disabled":e.isDisabled,tabindex:e.tabIndex},on:{keydown:function(t){return"button"in t||!e._k(t.keyCode,"space",32)?(t.stopPropagation(),t.preventDefault(),void(e.value=e.label)):null}}},[i("input",{directives:[{name:"model",rawName:"v-model",value:e.value,expression:"value"}],staticClass:"el-radio-button__orig-radio",attrs:{type:"radio",name:e.name,disabled:e.isDisabled,tabindex:"-1"},domProps:{value:e.label,checked:e._q(e.value,e.label)},on:{change:e.handleChange,__c:function(t){e.value=e.label}}}),i("span",{staticClass:"el-radio-button__inner",style:e.value===e.label?e.activeStyle:null},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(770),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(771),i(772),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(666),o=n(s);t.default={name:"ElCheckbox",mixins:[o.default],componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this.isGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.lengththis._checkboxGroup.max&&(this.isLimitExceeded=!0),this.isLimitExceeded===!1&&this.dispatch("ElCheckboxGroup","input",[e])):(this.$emit("input",e),this.selfModel=e)}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?this.model.indexOf(this.label)>-1:null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},isGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return this._checkboxGroup=e,!0;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},isDisabled:function(){return this.isGroup?this._checkboxGroup.disabled||this.disabled:this.disabled},checkboxSize:function(){return this.isGroup?this._checkboxGroup.size||this.size:this.size}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number],id:String,controls:String,border:Boolean,size:String},methods:{addToStore:function(){Array.isArray(this.model)&&this.model.indexOf(this.label)===-1?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;this.$nextTick(function(){t.isLimitExceeded||(t.$emit("change",t.model,e),t.isGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value]))})}},created:function(){this.checked&&this.addToStore()},mounted:function(){this.indeterminate&&this.$el.setAttribute("aria-controls",this.controls)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-checkbox",class:[e.border&&e.checkboxSize?"el-checkbox--"+e.checkboxSize:"",{"is-disabled":e.isDisabled},{"is-bordered":e.border},{"is-checked":e.isChecked}],attrs:{role:"checkbox","aria-checked":e.indeterminate?"mixed":e.isChecked,"aria-disabled":e.isDisabled,id:e.id}},[i("span",{staticClass:"el-checkbox__input",class:{"is-disabled":e.isDisabled,"is-checked":e.isChecked,"is-indeterminate":e.indeterminate,"is-focus":e.focus},attrs:{"aria-checked":"mixed"}},[i("span",{staticClass:"el-checkbox__inner"}),e.trueLabel||e.falseLabel?i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox",name:e.name,disabled:e.isDisabled,"true-value":e.trueLabel,"false-value":e.falseLabel},domProps:{checked:Array.isArray(e.model)?e._i(e.model,null)>-1:e._q(e.model,e.trueLabel)},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=n.checked?e.trueLabel:e.falseLabel;if(Array.isArray(i)){var o=null,r=e._i(i,o);s?r<0&&(e.model=i.concat(o)):r>-1&&(e.model=i.slice(0,r).concat(i.slice(r+1)))}else e.model=s}}}):i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox",disabled:e.isDisabled,name:e.name},domProps:{value:e.label,checked:Array.isArray(e.model)?e._i(e.model,e.label)>-1:e.model},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=!!n.checked;if(Array.isArray(i)){var o=e.label,r=e._i(i,o);s?r<0&&(e.model=i.concat(o)):r>-1&&(e.model=i.slice(0,r).concat(i.slice(r+1)))}else e.model=s}}})]),e.$slots.default||e.label?i("span",{staticClass:"el-checkbox__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(774),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(775),i(776),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(666),o=n(s);t.default={name:"ElCheckboxButton",mixins:[o.default],data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},props:{value:{},label:{},disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},computed:{model:{get:function(){return this._checkboxGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this._checkboxGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.lengththis._checkboxGroup.max&&(this.isLimitExceeded=!0),this.isLimitExceeded===!1&&this.dispatch("ElCheckboxGroup","input",[e])):void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?this.model.indexOf(this.label)>-1:null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},_checkboxGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return e;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},activeStyle:function(){return{backgroundColor:this._checkboxGroup.fill||"",borderColor:this._checkboxGroup.fill||"",color:this._checkboxGroup.textColor||"","box-shadow":"-1px 0 0 0 "+this._checkboxGroup.fill}},size:function(){return this._checkboxGroup.size},isDisabled:function(){return this._checkboxGroup?this._checkboxGroup.disabled||this.disabled:this.disabled}},methods:{addToStore:function(){Array.isArray(this.model)&&this.model.indexOf(this.label)===-1?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;this.$nextTick(function(){t.isLimitExceeded||(t.$emit("change",t.model,e),t._checkboxGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value]))})}},created:function(){this.checked&&this.addToStore()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-checkbox-button",class:[e.size?"el-checkbox-button--"+e.size:"",{"is-disabled":e.isDisabled},{"is-checked":e.isChecked},{"is-focus":e.focus}],attrs:{role:"checkbox","aria-checked":e.isChecked,"aria-disabled":e.isDisabled}},[e.trueLabel||e.falseLabel?i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:e.name,disabled:e.isDisabled,"true-value":e.trueLabel,"false-value":e.falseLabel},domProps:{checked:Array.isArray(e.model)?e._i(e.model,null)>-1:e._q(e.model,e.trueLabel)},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=n.checked?e.trueLabel:e.falseLabel;if(Array.isArray(i)){var o=null,r=e._i(i,o);s?r<0&&(e.model=i.concat(o)):r>-1&&(e.model=i.slice(0,r).concat(i.slice(r+1)))}else e.model=s}}}):i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:e.name,disabled:e.isDisabled},domProps:{value:e.label,checked:Array.isArray(e.model)?e._i(e.model,e.label)>-1:e.model},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=!!n.checked;if(Array.isArray(i)){var o=e.label,r=e._i(i,o);s?r<0&&(e.model=i.concat(o)):r>-1&&(e.model=i.slice(0,r).concat(i.slice(r+1)))}else e.model=s}}}),e.$slots.default||e.label?i("span",{staticClass:"el-checkbox-button__inner",style:e.isChecked?e.activeStyle:null},[e._t("default",[e._v(e._s(e.label))])],2):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(778),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(779),i(780),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(666),o=n(s);t.default={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[o.default],props:{value:{},disabled:Boolean,min:Number,max:Number,size:String,fill:String,textColor:String},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-checkbox-group",attrs:{role:"group","aria-label":"checkbox-group"}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(782),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(783),i(784),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElSwitch",props:{value:{type:[Boolean,String,Number],default:!1},disabled:{type:Boolean,default:!1},width:{type:Number,default:0},onIconClass:{type:String,default:""},offIconClass:{type:String,default:""},onText:String,offText:String,onColor:{type:String,default:""},offColor:{type:String,default:""},onValue:{type:[Boolean,String,Number],default:!0},offValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""}},data:function(){return{coreWidth:this.width}},created:function(){~[this.onValue,this.offValue].indexOf(this.value)||this.$emit("input",this.offValue)},computed:{checked:function(){return this.value===this.onValue},transform:function(){return this.checked?"translate3d("+(this.coreWidth-20)+"px, 0, 0)":""}},watch:{checked:function(){this.$refs.input.checked=this.checked,(this.onColor||this.offColor)&&this.setBackgroundColor()}},methods:{handleChange:function(e){var t=this;this.$emit("input",this.checked?this.offValue:this.onValue),this.$emit("change",this.checked?this.offValue:this.onValue),this.$nextTick(function(){t.$refs.input.checked=t.checked})},setBackgroundColor:function(){var e=this.checked?this.onColor:this.offColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e},switchValue:function(){this.$refs.input.click()}},mounted:function(){this.coreWidth=this.width||40,(this.onColor||this.offColor)&&this.setBackgroundColor(),this.$refs.input.checked=this.checked}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-switch",class:{"is-disabled":e.disabled,"is-checked":e.checked},attrs:{role:"switch","aria-checked":e.checked,"aria-disabled":e.disabled},on:{click:e.switchValue}},[i("input",{ref:"input",staticClass:"el-switch__input",attrs:{type:"checkbox",name:e.name,"true-value":e.onValue,"false-value":e.offValue,disabled:e.disabled},on:{change:e.handleChange,keydown:function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?void e.switchValue(t):null}}}),e.offIconClass||e.offText?i("span",{class:["el-switch__label","el-switch__label--left",e.checked?"":"is-active"]},[e.offIconClass?i("i",{class:[e.offIconClass]}):e._e(),!e.offIconClass&&e.offText?i("span",{attrs:{"aria-hidden":e.checked}},[e._v(e._s(e.offText))]):e._e()]):e._e(),i("span",{ref:"core",staticClass:"el-switch__core",style:{width:e.coreWidth+"px"}},[i("span",{staticClass:"el-switch__button",style:{transform:e.transform}})]),e.onIconClass||e.onText?i("span",{class:["el-switch__label","el-switch__label--right",e.checked?"is-active":""]},[e.onIconClass?i("i",{class:[e.onIconClass]}):e._e(),!e.onIconClass&&e.onText?i("span",{attrs:{"aria-hidden":!e.checked}},[e._v(e._s(e.onText))]):e._e()]):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(786),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(787),i(788),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(666),o=n(s);t.default={mixins:[o.default],name:"ElOptionGroup",componentName:"ElOptionGroup",props:{label:String,disabled:{type:Boolean,default:!1}},data:function(){return{visible:!0}},watch:{disabled:function(e){this.broadcast("ElOption","handleGroupDisabled",e)}},methods:{queryChange:function(){this.visible=this.$children&&Array.isArray(this.$children)&&this.$children.some(function(e){return e.visible===!0})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"el-select-group__wrap"},[i("li",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-group__title"},[e._v(e._s(e.label))]),i("li",[i("ul",{staticClass:"el-select-group"},[e._t("default")],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(790),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(791),i(805),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(769),o=n(s),r=i(43),a=n(r),l=i(695),u=n(l),c=i(692),d=i(668),h=n(d),f=i(792),p=n(f),m=i(794),v=n(m),g=i(795),y=n(g),b=i(799),_=n(b),x=i(804),C=n(x),w=i(793),k=1;t.default={name:"ElTable",mixins:[h.default],props:{data:{type:Array,default:function(){return[]}},width:[String,Number],height:[String,Number],maxHeight:[String,Number],fit:{type:Boolean,default:!0},stripe:Boolean,border:Boolean,rowKey:[String,Function],context:{},showHeader:{type:Boolean,default:!0},showSummary:Boolean,sumText:String,summaryMethod:Function,rowClassName:[String,Function],rowStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String},components:{TableHeader:_.default,TableFooter:C.default,TableBody:y.default,ElCheckbox:o.default},methods:{setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},clearSelection:function(){this.store.clearSelection()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY()},bindEvents:function(){var e=this,t=this.$refs,i=t.headerWrapper,n=t.footerWrapper,s=this.$refs,o=this;this.bodyWrapper.addEventListener("scroll",function(){i&&(i.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),s.fixedBodyWrapper&&(s.fixedBodyWrapper.scrollTop=this.scrollTop),s.rightFixedBodyWrapper&&(s.rightFixedBodyWrapper.scrollTop=this.scrollTop);var e=this.scrollWidth-this.offsetWidth-1,t=this.scrollLeft;t>=e?o.scrollPosition="right":0===t?o.scrollPosition="left":o.scrollPosition="middle"});var r=function(t){var i=t.deltaX,n=t.deltaY;Math.abs(i)0?e.bodyWrapper.scrollLeft+=10:i<0&&(e.bodyWrapper.scrollLeft-=10))};i&&(0,w.mousewheel)(i,(0,a.default)(16,r)),n&&(0,w.mousewheel)(n,(0,a.default)(16,r)),this.fit&&(this.windowResizeListener=(0,a.default)(50,function(){e.$ready&&e.doLayout()}),(0,c.addResizeListener)(this.$el,this.windowResizeListener))},doLayout:function(){var e=this;this.store.updateColumns(),this.layout.update(),this.updateScrollY(),this.$nextTick(function(){e.height?e.layout.setHeight(e.height):e.maxHeight?e.layout.setMaxHeight(e.maxHeight):e.shouldUpdateHeight&&e.layout.updateHeight(),e.$el&&(e.isHidden=0===e.$el.clientWidth)})}},created:function(){var e=this;this.tableId="el-table_"+k+"_",this.debouncedLayout=(0,u.default)(50,function(){return e.doLayout()})},computed:{bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return"number"==typeof this.height||this.fixedColumns.length>0||this.rightFixedColumns.length>0},selection:function(){return this.store.states.selection},columns:function(){return this.store.states.columns},tableData:function(){return this.store.states.data},fixedColumns:function(){return this.store.states.fixedColumns},rightFixedColumns:function(){return this.store.states.rightFixedColumns},bodyHeight:function(){var e={};return this.height?e={height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight&&(e={"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight-this.layout.footerHeight:this.maxHeight-this.layout.footerHeight)+"px"}),e},bodyWidth:function e(){var t=this.layout,e=t.bodyWidth,i=t.scrollY,n=t.gutterWidth;return e?e-(i?n:0)+"px":""},fixedBodyHeight:function(){var e={};if(this.height)e={height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""};else if(this.maxHeight){var t=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;this.showHeader&&(t-=this.layout.headerHeight),e={"max-height":t+"px"}}return e},fixedHeight:function(){var e={};return e=this.maxHeight?{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:function(e){this.layout.setHeight(e)},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){this.store.commit("setData",e),this.$ready&&this.doLayout()}},expandRowKeys:function(e){this.store.setExpandRowKeys(e)}},destroyed:function(){this.windowResizeListener&&(0,c.removeResizeListener)(this.$el,this.windowResizeListener)},mounted:function(){var e=this;this.bindEvents(),this.doLayout(),this.store.states.columns.forEach(function(t){t.filteredValue&&t.filteredValue.length&&e.store.commit("filterChange",{column:t,values:t.filteredValue,silent:!0})}),this.$ready=!0},data:function(){var e=new p.default(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll}),t=new v.default({store:e,table:this,fit:this.fit,showHeader:this.showHeader});return{store:e,layout:t,isHidden:!1,renderExpanded:null,resizeProxyVisible:!1,isGroup:!1,scrollPosition:"left"}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),r=i(695),a=n(r),l=i(793),u=function(e,t){var i=t.sortingColumn;return i&&"string"!=typeof i.sortable?(0,l.orderBy)(e,t.sortProp,t.sortOrder,i.sortMethod):e},c=function(e,t){var i={};return(e||[]).forEach(function(e,n){i[(0,l.getRowIdentity)(e,t)]={row:e,index:n}}),i},d=function(e,t,i){var n=!1,s=e.selection,o=s.indexOf(t);return"undefined"==typeof i?o===-1?(s.push(t),n=!0):(s.splice(o,1),n=!0):i&&o===-1?(s.push(t),n=!0):!i&&o>-1&&(s.splice(o,1),n=!0),n},h=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],isComplex:!1,_data:null,filteredData:null,data:null,sortingColumn:null,sortProp:null,sortOrder:null,isAllSelected:!1,selection:[],reserveSelection:!1,selectable:null,currentRow:null,hoverRow:null,filters:{},expandRows:[],defaultExpandAll:!1};for(var i in t)t.hasOwnProperty(i)&&this.states.hasOwnProperty(i)&&(this.states[i]=t[i])};h.prototype.mutations={setData:function(e,t){var i=this,n=e._data!==t;e._data=t,e.data=u(t||[],e),this.updateCurrentRow(),e.reserveSelection?!function(){var t=e.rowKey;t?!function(){var n=e.selection,s=c(n,t);e.data.forEach(function(e){var i=(0,l.getRowIdentity)(e,t),o=s[i];o&&(n[o.index]=e)}),i.updateAllSelected()}():console.warn("WARN: rowKey is required when reserve-selection is enabled.")}():(n?this.clearSelection():this.cleanSelection(),this.updateAllSelected());var s=e.defaultExpandAll;s&&(this.states.expandRows=(e.data||[]).slice(0)),o.default.nextTick(function(){return i.table.updateScrollY()})},changeSortCondition:function(e){var t=this;e.data=u(e.filteredData||e._data||[],e),this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),o.default.nextTick(function(){return t.table.updateScrollY()})},filterChange:function(e,t){var i=this,n=t.column,s=t.values,r=t.silent;s&&!Array.isArray(s)&&(s=[s]);var a=n.property,c={};a&&(e.filters[n.id]=s,c[n.columnKey||n.id]=s);var d=e._data;Object.keys(e.filters).forEach(function(t){var n=e.filters[t];if(n&&0!==n.length){var s=(0,l.getColumnById)(i.states,t);s&&s.filterMethod&&(d=d.filter(function(e){return n.some(function(t){return s.filterMethod.call(null,t,e)})}))}}),e.filteredData=d,e.data=u(d,e),r||this.table.$emit("filter-change",c),o.default.nextTick(function(){return i.table.updateScrollY()})},insertColumn:function(e,t,i,n){var s=e._columns;n&&(s=n.children,s||(s=n.children=[])),"undefined"!=typeof i?s.splice(i,0,t):s.push(t),"selection"===t.type&&(e.selectable=t.selectable,e.reserveSelection=t.reserveSelection),this.updateColumns(),this.scheduleLayout()},removeColumn:function(e,t){var i=e._columns;i&&i.splice(i.indexOf(t),1),this.updateColumns(),this.scheduleLayout()},setHoverRow:function(e,t){e.hoverRow=t},setCurrentRow:function(e,t){var i=e.currentRow;e.currentRow=t,i!==t&&this.table.$emit("current-change",t,i)},rowSelectedChanged:function(e,t){var i=d(e,t),n=e.selection;if(i){var s=this.table;s.$emit("selection-change",n),s.$emit("select",n,t)}this.updateAllSelected()},toggleRowExpanded:function(e,t,i){var n=e.expandRows;if("undefined"!=typeof i){var s=n.indexOf(t);i?s===-1&&n.push(t):s!==-1&&n.splice(s,1)}else{var o=n.indexOf(t);o===-1?n.push(t):n.splice(o,1)}this.table.$emit("expand",t,n.indexOf(t)!==-1)},toggleAllSelection:(0,a.default)(10,function(e){var t=e.data||[],i=!e.isAllSelected,n=this.states.selection,s=!1;t.forEach(function(t,n){e.selectable?e.selectable.call(null,t,n)&&d(e,t,i)&&(s=!0):d(e,t,i)&&(s=!0)});var o=this.table;s&&o.$emit("selection-change",n),o.$emit("select-all",n),e.isAllSelected=i})};var f=function e(t){var i=[];return t.forEach(function(t){t.children?i.push.apply(i,e(t.children)):i.push(t)}),i};h.prototype.updateColumns=function(){var e=this.states,t=e._columns||[];e.fixedColumns=t.filter(function(e){return e.fixed===!0||"left"===e.fixed}),e.rightFixedColumns=t.filter(function(e){return"right"===e.fixed}),e.fixedColumns.length>0&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0])),e.originColumns=[].concat(e.fixedColumns).concat(t.filter(function(e){return!e.fixed})).concat(e.rightFixedColumns),e.columns=f(e.originColumns),e.isComplex=e.fixedColumns.length>0||e.rightFixedColumns.length>0},h.prototype.isSelected=function(e){return(this.states.selection||[]).indexOf(e)>-1},h.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection=[],t.length>0&&this.table.$emit("selection-change",e.selection)},h.prototype.setExpandRowKeys=function(e){var t=[],i=this.states.data,n=this.states.rowKey;if(!n)throw new Error("[Table] prop row-key should not be empty.");var s=c(i,n);e.forEach(function(e){var i=s[e];i&&t.push(i.row)}),this.states.expandRows=t},h.prototype.toggleRowSelection=function(e,t){var i=d(this.states,e,t);i&&this.table.$emit("selection-change",this.states.selection)},h.prototype.cleanSelection=function(){var e=this.states.selection||[],t=this.states.data,i=this.states.rowKey,n=void 0;if(i){n=[];var s=c(e,i),o=c(t,i);for(var r in s)s.hasOwnProperty(r)&&!o[r]&&n.push(s[r].row)}else n=e.filter(function(e){return t.indexOf(e)===-1});n.forEach(function(t){e.splice(e.indexOf(t),1)}),n.length&&this.table.$emit("selection-change",e)},h.prototype.updateAllSelected=function(){var e=this.states,t=e.selection,i=e.rowKey,n=e.selectable,s=e.data;if(!s||0===s.length)return void(e.isAllSelected=!1);var o=void 0;i&&(o=c(e.selection,i));for(var r=function(e){return o?!!o[(0,l.getRowIdentity)(e,i)]:t.indexOf(e)!==-1},a=!0,u=0,d=0,h=s.length;d1?i-1:0),s=1;si?r:-r})},t.getColumnById=function(e,t){var i=null;return e.columns.forEach(function(e){e.id===t&&(i=e)}),i}),a=(t.getColumnByCell=function(e,t){var i=(t.className||"").match(/el-table_[^\s]+/gm);return i?r(e,i[0]):null},"undefined"!=typeof navigator&&navigator.userAgent.toLowerCase().indexOf("firefox")>-1);t.mousewheel=function(e,t){e&&e.addEventListener&&e.addEventListener(a?"DOMMouseScroll":"mousewheel",t)},t.getRowIdentity=function(e,t){if(!e)throw new Error("row is required when get row identity");if("string"==typeof t){if(t.indexOf(".")<0)return e[t];for(var i=t.split("."),n=e,s=0;st.offsetHeight}}},e.prototype.setHeight=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"height",i=this.table.$el;"string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,i&&("number"==typeof e?(i.style[t]=e+"px",this.updateHeight()):"string"==typeof e&&(""===e&&(i.style[t]=""),this.updateHeight()))},e.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},e.prototype.updateHeight=function(){var e=this.tableHeight=this.table.$el.clientHeight,t=!this.table.data||0===this.table.data.length,i=this.table.$refs,n=i.headerWrapper,s=i.footerWrapper,o=this.footerHeight=s?s.offsetHeight:0;if(!this.showHeader||n){if(this.showHeader){var r=this.headerHeight=n.offsetHeight,a=e-r-o+(s?1:0);null===this.height||isNaN(this.height)&&"string"!=typeof this.height||(this.bodyHeight=a),this.fixedBodyHeight=this.scrollX?a-this.gutterWidth:a}else this.headerHeight=0,null===this.height||isNaN(this.height)&&"string"!=typeof this.height||(this.bodyHeight=e-o+(s?1:0)),this.fixedBodyHeight=this.scrollX?e-this.gutterWidth:e;this.viewportHeight=this.scrollX?e-(t?0:this.gutterWidth):e}},e.prototype.update=function(){var e=this.fit,t=this.table.columns,i=this.table.$el.clientWidth,n=0,s=[];t.forEach(function(e){e.isColumnGroup?s.push.apply(s,e.columns):s.push(e)});var o=s.filter(function(e){return"number"!=typeof e.width});if(o.length>0&&e){if(s.forEach(function(e){n+=e.width||e.minWidth||80}),ni,this.bodyWidth=n;var a=this.store.states.fixedColumns;if(a.length>0){var l=0;a.forEach(function(e){l+=e.realWidth}),this.fixedWidth=l}var u=this.store.states.rightFixedColumns;if(u.length>0){var c=0;u.forEach(function(e){c+=e.realWidth}),this.rightFixedWidth=c}},e}();t.default=a},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(793),o=i(292),r=i(769),a=n(r),l=i(796),u=n(l),c=i(695),d=n(c);t.default={components:{ElCheckbox:a.default,ElTooltip:u.default},props:{store:{required:!0},stripe:Boolean,context:{},layout:{required:!0},rowClassName:[String,Function],rowStyle:[Object,Function],fixed:String,highlight:Boolean},render:function(e){var t=this,i=this.columns.map(function(e,i){return t.isColumnHidden(i)});return e("table",{class:"el-table__body",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])})]),e("tbody",null,[this._l(this.data,function(n,s){return[e("tr",{style:t.rowStyle?t.getRowStyle(n,s):null,key:t.table.rowKey?t.getKeyOfRow(n,s):s,on:{dblclick:function(e){return t.handleDoubleClick(e,n)},click:function(e){return t.handleClick(e,n)},contextmenu:function(e){return t.handleContextMenu(e,n)},mouseenter:function(e){return t.handleMouseEnter(s)},mouseleave:function(e){return t.handleMouseLeave()}},class:[t.getRowClass(n,s)]},[t._l(t.columns,function(o,r){return e("td",{class:[o.id,o.align,o.className||"",i[r]?"is-hidden":""],on:{mouseenter:function(e){return t.handleCellMouseEnter(e,n)},mouseleave:t.handleCellMouseLeave}},[o.renderCell.call(t._renderProxy,e,{row:n,column:o,$index:s,store:t.store,_self:t.context||t.table.$vnode.context},i[r])])}),!t.fixed&&t.layout.scrollY&&t.layout.gutterWidth?e("td",{class:"gutter"},[]):""]),t.store.states.expandRows.indexOf(n)>-1?e("tr",null,[e("td",{attrs:{colspan:t.columns.length},class:"el-table__expanded-cell"},[t.table.renderExpanded?t.table.renderExpanded(e,{row:n,$index:s,store:t.store}):""])]):""]}).concat(this._self.$parent.$slots.append).concat(e("el-tooltip",{attrs:{effect:this.table.tooltipEffect,placement:"top",content:this.tooltipContent},ref:"tooltip"},[]))])])},watch:{"store.states.hoverRow":function(e,t){if(this.store.states.isComplex){var i=this.$el;if(i){var n=i.querySelectorAll("tbody > tr.el-table__row"),s=n[t],r=n[e];s&&(0,o.removeClass)(s,"hover-row"),r&&(0,o.addClass)(r,"hover-row")}}},"store.states.currentRow":function(e,t){if(this.highlight){var i=this.$el;if(i){var n=this.store.states.data,s=i.querySelectorAll("tbody > tr.el-table__row"),r=s[n.indexOf(t)],a=s[n.indexOf(e)];r?(0,o.removeClass)(r,"current-row"):s&&[].forEach.call(s,function(e){return(0,o.removeClass)(e,"current-row")}),a&&(0,o.addClass)(a,"current-row")}}}},computed:{table:function(){return this.$parent},data:function(){return this.store.states.data},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},data:function(){return{tooltipContent:""}},created:function(){this.activateTooltip=(0,d.default)(50,function(e){return e.handleShowPopper()})},methods:{getKeyOfRow:function(e,t){var i=this.table.rowKey;return i?(0,s.getRowIdentity)(e,i):t},isColumnHidden:function(e){return this.fixed===!0||"left"===this.fixed?e>=this.leftFixedCount:"right"===this.fixed?e=this.columnsCount-this.rightFixedCount},getRowStyle:function(e,t){var i=this.rowStyle;return"function"==typeof i?i.call(null,e,t):i},getRowClass:function(e,t){var i=["el-table__row"];this.stripe&&t%2===1&&i.push("el-table__row--striped");var n=this.rowClassName;return"string"==typeof n?i.push(n):"function"==typeof n&&i.push(n.call(null,e,t)||""),i.join(" ")},handleCellMouseEnter:function(e,t){var i=this.table,n=(0,s.getCell)(e);if(n){var r=(0,s.getColumnByCell)(i,n),a=i.hoverState={cell:n,column:r,row:t};i.$emit("cell-mouse-enter",a.row,a.column,a.cell,e)}var l=e.target.querySelector(".cell");if((0,o.hasClass)(l,"el-tooltip")&&l.scrollWidth>l.offsetWidth){var u=this.$refs.tooltip;this.tooltipContent=n.innerText,u.referenceElm=n,u.$refs.popper&&(u.$refs.popper.style.display="none"),u.doDestroy(),u.setExpectedState(!0),this.activateTooltip(u)}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;t&&(t.setExpectedState(!1),t.handleClosePopper());var i=(0,s.getCell)(e);if(i){var n=this.table.hoverState;this.table.$emit("cell-mouse-leave",n.row,n.column,n.cell,e)}},handleMouseEnter:function(e){this.store.commit("setHoverRow",e)},handleMouseLeave:function(){this.store.commit("setHoverRow",null)},handleContextMenu:function(e,t){this.handleEvent(e,t,"contextmenu")},handleDoubleClick:function(e,t){this.handleEvent(e,t,"dblclick")},handleClick:function(e,t){this.store.commit("setCurrentRow",t),this.handleEvent(e,t,"click")},handleEvent:function(e,t,i){var n=this.table,o=(0,s.getCell)(e),r=void 0;o&&(r=(0,s.getColumnByCell)(n,o),r&&n.$emit("cell-"+i,t,r,o,e)),n.$emit("row-"+i,t,e,r)},handleExpandClick:function(e){this.store.commit("toggleRowExpanded",e)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(797),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(677),o=n(s),r=i(695),a=n(r),l=i(798),u=i(2),c=n(u);t.default={name:"ElTooltip",mixins:[o.default],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},popperClass:String,content:String,visibleArrow:{default:!0},transition:{type:String,default:"el-fade-in-linear"},popperOptions:{default:function(){return{boundariesPadding:10,gpuAcceleration:!1}}},enterable:{type:Boolean,default:!0},hideAfter:{type:Number,default:0}},data:function(){return{timeoutPending:null}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new c.default({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=(0,a.default)(200,function(){return e.handleClosePopper()}))},render:function(e){var t=this;if(this.popperVM&&(this.popperVM.node=e("transition",{attrs:{name:this.transition},on:{afterLeave:this.doDestroy}},[e("div",{on:{mouseleave:function(){t.setExpectedState(!1),t.debounceClose()},mouseenter:function(){t.setExpectedState(!0)}},ref:"popper",directives:[{name:"show",value:!this.disabled&&this.showPopper}],class:["el-tooltip__popper","is-"+this.effect,this.popperClass]},[this.$slots.content||this.content])])),!this.$slots.default||!this.$slots.default.length)return this.$slots.default;var i=(0,l.getFirstComponentChild)(this.$slots.default);if(!i)return i;var n=i.data=i.data||{},s=i.data.on=i.data.on||{},o=i.data.nativeOn=i.data.nativeOn||{};return n.staticClass=this.concatClass(n.staticClass,"el-tooltip"),s.mouseenter=this.addEventHandle(s.mouseenter,this.show),s.mouseleave=this.addEventHandle(s.mouseleave,this.hide),o.mouseenter=this.addEventHandle(o.mouseenter,this.show),o.mouseleave=this.addEventHandle(o.mouseleave,this.hide),i},mounted:function(){this.referenceElm=this.$el},methods:{show:function(){this.setExpectedState(!0),this.handleShowPopper()},hide:function(){this.setExpectedState(!1),this.debounceClose()},addEventHandle:function(e,t){return e?Array.isArray(e)?e.indexOf(t)>-1?e:e.concat(t):e===t?e:[e,t]:t},concatClass:function(e,t){return e&&e.indexOf(t)>-1?e:e?t?e+" "+t:e:t||""},handleShowPopper:function(){var e=this;this.expectedState&&!this.manual&&(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.showPopper=!0},this.openDelay),this.hideAfter>0&&(this.timeoutPending=setTimeout(function(){e.showPopper=!1},this.hideAfter)))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.timeoutPending&&clearTimeout(this.timeoutPending),this.showPopper=!1)},setExpectedState:function(e){e===!1&&clearTimeout(this.timeoutPending),this.expectedState=e}}}},function(e,t,i){"use strict";function n(e){return"object"===("undefined"==typeof e?"undefined":o(e))&&(0,r.hasOwn)(e,"componentOptions")}function s(e){return e&&e.filter(function(e){return e&&e.tag})[0]}t.__esModule=!0;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.isVNode=n,t.getFirstComponentChild=s;var r=i(19)},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(292),o=i(769),r=n(o),a=i(686),l=n(a),u=i(2),c=n(u),d=i(800),h=n(d),f=function e(t){var i=[];return t.forEach(function(t){t.children?(i.push(t),i.push.apply(i,e(t.children))):i.push(t)}),i},p=function(e){var t=1,i=function e(i,n){if(n&&(i.level=n.level+1,t1;return s&&(this.$parent.isGroup=!0),e("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])}),!this.fixed&&this.layout.gutterWidth?e("col",{attrs:{name:"gutter",width:this.layout.scrollY?this.layout.gutterWidth:""}},[]):""]),e("thead",{class:[{"is-group":s,"has-gutter":this.hasGutter}]},[this._l(n,function(i,n){return e("tr",null,[t._l(i,function(s,o){return e("th",{attrs:{colspan:s.colSpan,rowspan:s.rowSpan},on:{mousemove:function(e){return t.handleMouseMove(e,s)},mouseout:t.handleMouseOut,mousedown:function(e){return t.handleMouseDown(e,s)},click:function(e){return t.handleHeaderClick(e,s)}},class:[s.id,s.order,s.headerAlign,s.className||"",0===n&&t.isCellHidden(o,i)?"is-hidden":"",s.children?"":"is-leaf",s.labelClassName,s.sortable?"is-sortable":""]},[e("div",{class:["cell",s.filteredValue&&s.filteredValue.length>0?"highlight":"",s.labelClassName]},[s.renderHeader?s.renderHeader.call(t._renderProxy,e,{column:s,$index:o,store:t.store,_self:t.$parent.$vnode.context}):s.label,s.sortable?e("span",{class:"caret-wrapper",on:{click:function(e){return t.handleSortClick(e,s)}}},[e("span",{class:"sort-caret ascending",on:{click:function(e){return t.handleSortClick(e,s,"ascending")}}},[e("i",{class:"el-icon-sort-up"},[])]),e("span",{class:"sort-caret descending",on:{click:function(e){return t.handleSortClick(e,s,"descending")}}},[e("i",{class:"el-icon-sort-down"},[])])]):"",s.filterable?e("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return t.handleFilterClick(e,s)}}},[e("i",{class:["el-icon-arrow-down",s.filterOpened?"el-icon-arrow-up":""]},[])]):""])])}),t.hasGutter?e("th",{class:"gutter",style:{width:t.layout.scrollY?t.layout.gutterWidth+"px":"0"}},[]):""])})])])},props:{fixed:String,store:{required:!0},layout:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:r.default,ElTag:l.default},computed:{isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.layout.gutterWidth}},created:function(){this.filterPanels={}},mounted:function(){var e=this;this.defaultSort.prop&&!function(){var t=e.store.states;t.sortProp=e.defaultSort.prop,t.sortOrder=e.defaultSort.order||"ascending",e.$nextTick(function(i){for(var n=0,s=e.columns.length;n=this.leftFixedCount;if("right"===this.fixed){for(var i=0,n=0;n=this.columnsCount-this.rightFixedCount},toggleAllSelection:function(){this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var i=e.target,n=i.parentNode,s=this.$parent,o=this.filterPanels[t.id];return o&&t.filterOpened?void(o.showPopper=!1):(o||(o=new c.default(h.default),this.filterPanels[t.id]=o,t.filterPlacement&&(o.placement=t.filterPlacement),o.table=s,o.cell=n,o.column=t,!this.$isServer&&o.$mount(document.createElement("div"))),void setTimeout(function(){o.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filters&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleMouseDown:function(e,t){var i=this;this.$isServer||t.children&&t.children.length>0||this.draggingColumn&&this.border&&!function(){i.dragging=!0,i.$parent.resizeProxyVisible=!0;var n=i.$parent,o=n.$el,r=o.getBoundingClientRect().left,a=i.$el.querySelector("th."+t.id),l=a.getBoundingClientRect(),u=l.left-r+30;(0,s.addClass)(a,"noclick"),i.dragState={startMouseLeft:e.clientX,startLeft:l.right-r,startColumnLeft:l.left-r,tableLeft:r};var c=n.$refs.resizeProxy;c.style.left=i.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var d=function(e){var t=e.clientX-i.dragState.startMouseLeft,n=i.dragState.startLeft+t;c.style.left=Math.max(u,n)+"px"},h=function o(){if(i.dragging){var r=i.dragState,l=r.startColumnLeft,u=r.startLeft,h=parseInt(c.style.left,10),f=h-l;t.width=t.realWidth=f,n.$emit("header-dragend",t.width,u-l,t,e),i.store.scheduleLayout(),document.body.style.cursor="",i.dragging=!1,i.draggingColumn=null,i.dragState={},n.resizeProxyVisible=!1}document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",o),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){(0,s.removeClass)(a,"noclick")},0)};document.addEventListener("mousemove",d),document.addEventListener("mouseup",h)}()},handleMouseMove:function(e,t){if(!(t.children&&t.children.length>0)){for(var i=e.target;i&&"TH"!==i.tagName;)i=i.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var n=i.getBoundingClientRect(),s=document.body.style;n.width>12&&n.right-e.pageX<8?(s.cursor="col-resize",this.draggingColumn=t):this.dragging||(s.cursor="",this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){return e?"ascending"===e?"descending":null:"ascending"},handleSortClick:function(e,t,i){e.stopPropagation();for(var n=i||this.toggleOrder(t.order),o=e.target;o&&"TH"!==o.tagName;)o=o.parentNode;if(o&&"TH"===o.tagName&&(0,s.hasClass)(o,"noclick"))return void(0,s.removeClass)(o,"noclick");if(t.sortable){var r=this.store.states,a=r.sortProp,l=void 0,u=r.sortingColumn;u!==t&&(u&&(u.order=null),r.sortingColumn=t,a=t.property),n?l=t.order=n:(l=t.order=null,r.sortingColumn=null,a=null),r.sortProp=a,r.sortOrder=l,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}}},function(e,t,i){var n=i(13)(i(801),i(803),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(677),o=n(s),r=i(678),a=i(668),l=n(a),u=i(696),c=n(u),d=i(802),h=n(d),f=i(769),p=n(f),m=i(777),v=n(m);t.default={name:"ElTableFilterPanel",mixins:[o.default,l.default],directives:{Clickoutside:c.default},components:{ElCheckbox:p.default,ElCheckboxGroup:v.default},props:{placement:{type:String,default:"bottom-end"}},customRender:function(e){return e("div",{class:"el-table-filter"},[e("div",{class:"el-table-filter__content"},[]),e("div",{class:"el-table-filter__bottom"},[e("button",{on:{click:this.handleConfirm}},[this.t("el.table.confirmFilter")]),e("button",{on:{click:this.handleReset}},[this.t("el.table.resetFilter")])])])},methods:{isActive:function(e){return e.value===this.filterValue},handleOutsideClick:function(){this.showPopper=!1},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){this.filterValue=e,"undefined"!=typeof e&&null!==e?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e})}},data:function(){return{table:null,cell:null,column:null}},computed:{filters:function(){return this.column&&this.column.filters},filterValue:{get:function(){return(this.column.filteredValue||[])[0]},set:function(e){this.filteredValue&&("undefined"!=typeof e&&null!==e?this.filteredValue.splice(0,1,e):this.filteredValue.splice(0,1))}},filteredValue:{get:function(){return this.column?this.column.filteredValue||[]:[]},set:function(e){this.column&&(this.column.filteredValue=e)}},multiple:function(){return!this.column||this.column.filterMultiple}},mounted:function(){var e=this;this.popperElm=this.$el,this.referenceElm=this.cell,this.table.bodyWrapper.addEventListener("scroll",function(){e.updatePopper()}),this.$watch("showPopper",function(t){e.column&&(e.column.filterOpened=t),t?h.default.open(e):h.default.close(e)})},watch:{showPopper:function(e){e===!0&&parseInt(this.popperJS._popper.style.zIndex,10)=this.leftFixedCount;if("right"===this.fixed){for(var i=0,n=0;n=this.columnsCount-this.rightFixedCount}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-table",class:{"el-table--fit":e.fit,"el-table--striped":e.stripe,"el-table--border":e.border||e.isGroup,"el-table--hidden":e.isHidden,"el-table--group":e.isGroup,"el-table--fluid-height":e.maxHeight,"el-table--enable-row-hover":!e.store.states.isComplex,"el-table--enable-row-transition":0!==(e.store.states.data||[]).length&&(e.store.states.data||[]).length<100},on:{mouseleave:function(t){e.handleMouseLeave(t)}}},[i("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[e._t("default")],2),e.showHeader?i("div",{ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[i("table-header",{style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,layout:e.layout,border:e.border,"default-sort":e.defaultSort}})],1):e._e(),i("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",class:["is-scroll-"+e.scrollPosition],style:[e.bodyHeight]},[i("table-body",{style:{width:e.bodyWidth},attrs:{context:e.context,store:e.store,stripe:e.stripe,layout:e.layout,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}}),e.data&&0!==e.data.length?e._e():i("div",{staticClass:"el-table__empty-block",style:{width:e.bodyWidth}},[i("span",{staticClass:"el-table__empty-text"},[e._t("empty",[e._v(e._s(e.emptyText||e.t("el.table.emptyText")))])],2)])],1),e.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"}],ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[i("table-footer",{style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,layout:e.layout,border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,"default-sort":e.defaultSort}})],1):e._e(),e.fixedColumns.length>0?i("div",{ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},e.fixedHeight]},[e.showHeader?i("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",border:e.border,store:e.store,layout:e.layout}})],1):e._e(),i("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[i("table-body",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",store:e.store,stripe:e.stripe,layout:e.layout,highlight:e.highlightCurrentRow,"row-class-name":e.rowClassName,"row-style":e.rowStyle}})],1),e.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"}],ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store,layout:e.layout}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?i("div",{ref:"rightFixedWrapper",staticClass:"el-table__fixed-right",style:[{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},{right:e.layout.scrollY?(e.border?e.layout.gutterWidth:e.layout.gutterWidth||0)+"px":""},e.fixedHeight]},[e.showHeader?i("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",border:e.border,store:e.store,layout:e.layout}})],1):e._e(),i("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[i("table-body",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",store:e.store,stripe:e.stripe,layout:e.layout,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}})],1),e.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"}],ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store,layout:e.layout}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?i("div",{staticClass:"el-table__fixed-right-patch",style:{width:e.layout.scrollY?e.layout.gutterWidth+"px":"0",height:e.layout.headerHeight+"px"}}):e._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:e.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(807),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){if(null==e)throw new TypeError("Cannot destructure undefined")}t.__esModule=!0;var o=i(769),r=n(o),a=i(686),l=n(a),u=i(673),c=n(u),d=i(19),h=1,f={default:{order:""},selection:{width:48,minWidth:48,realWidth:48,order:"",className:"el-table-column--selection"},expand:{width:48,minWidth:48,realWidth:48,order:""},index:{width:48,minWidth:48,realWidth:48,order:""}},p={selection:{renderHeader:function(e){return e("el-checkbox",{nativeOn:{click:this.toggleAllSelection},attrs:{value:this.isAllSelected}},[])},renderCell:function(e,t){var i=t.row,n=t.column,s=t.store,o=t.$index;return e("el-checkbox",{attrs:{value:s.isSelected(i),disabled:!!n.selectable&&!n.selectable.call(null,i,o)},on:{input:function(){s.commit("rowSelectedChanged",i)}}},[])},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){var i=t.column;return i.label||"#"},renderCell:function(e,t){var i=t.$index;return e("div",null,[i+1])},sortable:!1},expand:{renderHeader:function(e,t){return s(t),""},renderCell:function(e,t,i){var n=t.row,s=t.store,o=s.states.expandRows.indexOf(n)>-1;return e("div",{class:"el-table__expand-icon "+(o?"el-table__expand-icon--expanded":""),on:{click:function(){return i.handleExpandClick(n)}}},[e("i",{class:"el-icon el-icon-arrow-right"},[])])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},m=function(e,t){var i={};(0,c.default)(i,f[e||"default"]);for(var n in t)if(t.hasOwnProperty(n)){var s=t[n];"undefined"!=typeof s&&(i[n]=s)}return i.minWidth||(i.minWidth=80),i.realWidth=i.width||i.minWidth,i},v=function(e,t){var i=t.row,n=t.column,s=n.property,o=s&&s.indexOf(".")===-1?i[s]:(0,d.getValueByPath)(i,s);return n&&n.formatter?n.formatter(i,n,o):o};t.default={name:"ElTableColumn",props:{type:{type:String,default:"default"},label:String,className:String,labelClassName:String,property:String,prop:String,width:{},minWidth:{},renderHeader:Function,sortable:{type:[String,Boolean], -default:!1},sortMethod:Function,resizable:{type:Boolean,default:!0},context:{},columnKey:String,align:String,headerAlign:String,showTooltipWhenOverflow:Boolean,showOverflowTooltip:Boolean,fixed:[Boolean,String],formatter:Function,selectable:Function,reserveSelection:Boolean,filterMethod:Function,filteredValue:Array,filters:Array,filterPlacement:String,filterMultiple:{type:Boolean,default:!0}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:r.default,ElTag:l.default},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e}},created:function(){var e=this;this.customRender=this.$options.render,this.$options.render=function(t){return t("div",e.$slots.default)},this.columnId=(this.$parent.tableId||this.$parent.columnId+"_")+"column_"+h++;var t=this.$parent,i=this.owner;this.isSubColumn=i!==t;var n=this.type,s=this.width;void 0!==s&&(s=parseInt(s,10),isNaN(s)&&(s=null));var o=this.minWidth;void 0!==o&&(o=parseInt(o,10),isNaN(o)&&(o=80));var r=!1,a=m(n,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:n,renderCell:null,renderHeader:this.renderHeader,minWidth:o,width:s,isColumnGroup:r,context:this.context,align:this.align?"is-"+this.align:null,headerAlign:this.headerAlign?"is-"+this.headerAlign:this.align?"is-"+this.align:null,sortable:""===this.sortable||this.sortable,sortMethod:this.sortMethod,resizable:this.resizable,showOverflowTooltip:this.showOverflowTooltip||this.showTooltipWhenOverflow,formatter:this.formatter,selectable:this.selectable,reserveSelection:this.reserveSelection,fixed:""===this.fixed||this.fixed,filterMethod:this.filterMethod,filters:this.filters,filterable:this.filters||this.filterMethod,filterMultiple:this.filterMultiple,filterOpened:!1,filteredValue:this.filteredValue||[],filterPlacement:this.filterPlacement||""});(0,c.default)(a,p[n]||{}),this.columnConfig=a;var l=a.renderCell,u=this;return"expand"===n?(i.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(a.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])})):void(a.renderCell=function(e,t){return u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=v),u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip",style:"width:"+(t.column.realWidth||t.column.width)+"px"},[l(e,t)]):e("div",{class:"cell"},[l(e,t)])})},destroyed:function(){this.$parent&&this.owner.store.commit("removeColumn",this.columnConfig)},watch:{label:function(e){this.columnConfig&&(this.columnConfig.label=e)},prop:function(e){this.columnConfig&&(this.columnConfig.property=e)},property:function(e){this.columnConfig&&(this.columnConfig.property=e)},filters:function(e){this.columnConfig&&(this.columnConfig.filters=e)},filterMultiple:function(e){this.columnConfig&&(this.columnConfig.filterMultiple=e)},align:function(e){this.columnConfig&&(this.columnConfig.align=e?"is-"+e:null,this.headerAlign||(this.columnConfig.headerAlign=e?"is-"+e:null))},headerAlign:function(e){this.columnConfig&&(this.columnConfig.headerAlign="is-"+(e?e:this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=e,this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=e,this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout())},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)}},mounted:function(){var e=this.owner,t=this.$parent,i=void 0;i=this.isSubColumn?[].indexOf.call(t.$el.children,this.$el):[].indexOf.call(t.$refs.hiddenColumns.children,this.$el),e.store.commit("insertColumn",this.columnConfig,i,this.isSubColumn?t.columnConfig:null)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(809),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(810),o=n(s),r=i(814),a=n(r),l=i(832),u=n(l),c=function(e){return"daterange"===e||"datetimerange"===e?u.default:a.default};t.default={mixins:[o.default],name:"ElDatePicker",props:{type:{type:String,default:"date"}},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=c(e),this.mountPicker()):this.panel=c(e)}},created:function(){this.panel=c(this.type)},methods:{handleKeydown:function(e){var t=e.keyCode;if(9===t||27===t||13===t)return!this.ranged&&(this.pickerVisible=!1),e.stopPropagation(),this.picker.confirm&&this.picker.confirm(),!this.ranged&&(this.currentValue=this.picker.date),void(this.$refs.reference.$refs?this.$refs.reference.$refs.input.blur():[].slice.call(this.$refs.reference.querySelectorAll("input")).forEach(function(e){e.blur()}));var i=[38,40,37,39];if(i.indexOf(t)!==-1){if("daterange"===this.type||"datetimerange"===this.type)return;return this.picker.handleKeyControl(t),void e.stopPropagation()}}}}},function(e,t,i){var n=i(13)(i(811),i(813),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),r=i(696),a=n(r),l=i(812),u=i(677),c=n(u),d=i(666),h=n(d),f=i(667),p=n(f),m=i(669),v=n(m),g=i(673),y=n(g),b={props:{appendToBody:c.default.props.appendToBody,offset:c.default.props.offset,boundariesPadding:c.default.props.boundariesPadding},methods:c.default.methods,data:function(){return(0,y.default)({visibleArrow:!0},c.default.data)},beforeDestroy:c.default.beforeDestroy},_={date:"yyyy-MM-dd",month:"yyyy-MM",datetime:"yyyy-MM-dd HH:mm:ss",time:"HH:mm:ss",week:"yyyywWW",timerange:"HH:mm:ss",daterange:"yyyy-MM-dd",datetimerange:"yyyy-MM-dd HH:mm:ss",year:"yyyy"},x=["date","datetime","time","time-select","week","month","year","daterange","timerange","datetimerange"],C=function(e,t){return(0,l.formatDate)(e,t)},w=function(e,t){return(0,l.parseDate)(e,t)},k=function(e,t){if(Array.isArray(e)&&2===e.length){var i=e[0],n=e[1];if(i&&n)return[(0,l.formatDate)(i,t),(0,l.formatDate)(n,t)]}return""},S=function(e,t,i){if(Array.isArray(e)||(e=e.split(i)),2===e.length){var n=e[0],s=e[1];return[(0,l.parseDate)(n,t),(0,l.parseDate)(s,t)]}return[]},M={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var i=(0,l.formatDate)(e,t),n=(0,l.getWeekNumber)(e);return i=/WW/.test(i)?i.replace(/WW/,n<10?"0"+n:n):i.replace(/W/,n)},parser:function(e){var t=(e||"").split("w");if(2===t.length){var i=Number(t[0]),n=Number(t[1]);if(!isNaN(i)&&!isNaN(n)&&n<54)return e}return null}},date:{formatter:C,parser:w},datetime:{formatter:C,parser:w},daterange:{formatter:k,parser:S},datetimerange:{formatter:k,parser:S},timerange:{formatter:k,parser:S},time:{formatter:C,parser:w},month:{formatter:C,parser:w},year:{formatter:C,parser:w},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}}},$={left:"bottom-start",center:"bottom",right:"bottom-end"},E=function(e,t){var i=e instanceof Array,n=t instanceof Array;return i&&n?new Date(e[0]).getTime()===new Date(t[0]).getTime()&&new Date(e[1]).getTime()===new Date(t[1]).getTime():!i&&!n&&new Date(e).getTime()===new Date(t).getTime()};t.default={mixins:[h.default,b,(0,p.default)("reference")],props:{size:String,format:String,readonly:Boolean,placeholder:String,startPlaceholder:String,endPlaceholder:String,name:String,disabled:Boolean,clearable:{type:Boolean,default:!0},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},rangeSeparator:{default:"-"},pickerOptions:{}},components:{ElInput:v.default},directives:{Clickoutside:a.default},data:function(){return{pickerVisible:!1,showClose:!1,currentValue:"",unwatchPickerOptions:null}},watch:{pickerVisible:function(e){e||this.dispatch("ElFormItem","el.form.blur"),this.readonly||this.disabled||(e?this.showPicker():this.hidePicker())},currentValue:function(e){e||(this.picker&&"function"==typeof this.picker.handleClear?this.picker.handleClear():this.$emit("input"))},value:{immediate:!0,handler:function(e){this.currentValue=(0,l.isDate)(e)?new Date(e):e}},displayValue:function(e){this.dispatch("ElFormItem","el.form.change")}},computed:{ranged:function(){return this.type.indexOf("range")>-1},reference:function e(){var e=this.$refs.reference;return e.$el||e},refInput:function(){return this.reference?[].slice.call(this.reference.querySelectorAll("input")):[]},valueIsEmpty:function(){var e=this.currentValue;if(Array.isArray(e)){for(var t=0,i=e.length;t0&&void 0!==arguments[0]?arguments[0]:"",i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];E(e.value,t)||(e.$emit("input",t),n&&e.value!==t&&e.$nextTick(function(){return e.$emit("change",e.displayValue)})),e.pickerVisible=e.picker.visible=i,e.picker.resetView&&e.picker.resetView()}),this.picker.$on("select-range",function(t,i,n){0!==e.refInput.length&&(n&&"min"!==n?"max"===n&&(e.refInput[1].setSelectionRange(t,i),e.refInput[1].focus()):(e.refInput[0].setSelectionRange(t,i),e.refInput[0].focus()))})},unmountPicker:function(){this.picker&&(this.picker.$destroy(),this.picker.$off(),"function"==typeof this.unwatchPickerOptions&&this.unwatchPickerOptions(),this.picker.$el.parentNode.removeChild(this.picker.$el))}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.limitRange=t.getRangeHours=t.nextMonth=t.prevMonth=t.getWeekNumber=t.getStartDateOfMonth=t.DAY_DURATION=t.getFirstDayOfMonth=t.getDayCountOfMonth=t.parseDate=t.formatDate=t.isDate=t.toDate=t.equalDate=void 0;var s=i(147),o=n(s),r=i(15),a=["sun","mon","tue","wed","thu","fri","sat"],l=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],u=function(){return{dayNamesShort:a.map(function(e){return(0,r.t)("el.datepicker.weeks."+e)}),dayNames:a.map(function(e){return(0,r.t)("el.datepicker.weeks."+e)}),monthNamesShort:l.map(function(e){return(0,r.t)("el.datepicker.months."+e)}),monthNames:l.map(function(e,t){return(0,r.t)("el.datepicker.month"+(t+1))}),amPm:["am","pm"]}},c=function(e,t){for(var i=[],n=e;n<=t;n++)i.push(n);return i},d=(t.equalDate=function(e,t){return e===t||new Date(e).getTime()===new Date(t).getTime()},t.toDate=function(e){return h(e)?new Date(e):null}),h=t.isDate=function(e){return null!==e&&void 0!==e&&!isNaN(new Date(e).getTime())},f=(t.formatDate=function(e,t){return e=d(e),e?o.default.format(e,t||"yyyy-MM-dd",u()):""},t.parseDate=function(e,t){return o.default.parse(e,t||"yyyy-MM-dd",u())},t.getDayCountOfMonth=function(e,t){return 3===t||5===t||8===t||10===t?30:1===t?e%4===0&&e%100!==0||e%400===0?29:28:31}),p=(t.getFirstDayOfMonth=function(e){var t=new Date(e.getTime());return t.setDate(1),t.getDay()},t.DAY_DURATION=864e5);t.getStartDateOfMonth=function(e,t){var i=new Date(e,t,1),n=i.getDay();return 0===n?i.setTime(i.getTime()-7*p):i.setTime(i.getTime()-p*n),i},t.getWeekNumber=function(e){var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var i=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-i.getTime())/864e5-3+(i.getDay()+6)%7)/7)},t.prevMonth=function(e){var t=e.getFullYear(),i=e.getMonth(),n=e.getDate(),s=0===i?t-1:t,o=0===i?11:i-1,r=f(s,o);return r2&&void 0!==arguments[2]?arguments[2]:"yyyy-MM-dd HH:mm:ss";if(!t||!t.length)return e;var n=t.length;e=o.default.parse(o.default.format(e,i),i);for(var s=0;s=r[0]&&e<=r[1])return e}var a=t[0][0],l=t[0][0];return t.forEach(function(e){l=new Date(Math.min(e[0],l)),a=new Date(Math.max(e[1],a))}),e11&&(this.month=0,this.year++)},nextYear:function(){"year"===this.currentView?this.$refs.yearTable.nextTenYear():(this.year++,this.date.setFullYear(this.year),this.resetDate())},prevYear:function(){"year"===this.currentView?this.$refs.yearTable.prevTenYear():(this.year--,this.date.setFullYear(this.year),this.resetDate())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleTimePick:function(e,t){if(e){var i=new Date(this.date.getTime()),n=e.getHours(),s=e.getMinutes(),o=e.getSeconds();if(i.setHours(n),i.setMinutes(s),i.setSeconds(o),"function"==typeof this.disabledDate&&this.disabledDate(i))return void(this.$refs.timepicker.disabled=!0);this.$refs.timepicker.disabled=!1,this.date=new Date(i.getTime())}this.timePickerVisible=t},handleMonthPick:function(e){this.month=e;var t=this.selectionMode;if("month"!==t)this.date.setMonth(e),this.currentView="date",this.resetDate();else{this.date.setMonth(e),this.year&&this.date.setFullYear(this.year),this.resetDate();var i=new Date(this.date.getFullYear(),e,1);this.$emit("pick",i)}},handleDatePick:function(e,t){var i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];"day"===this.selectionMode?(this.showTime||this.$emit("pick",new Date(e.getTime()),!1,i),this.date.setFullYear(e.getFullYear()),this.date.setMonth(e.getMonth(),e.getDate())):"week"===this.selectionMode&&(this.week=e.week,this.$emit("pick",e.date,!1,i)),this.resetDate()},handleYearPick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments[2];this.year=e,t&&(this.date.setFullYear(e),"year"===this.selectionMode?this.$emit("pick",new Date(e,0,1),!1,i):this.currentView="month",this.resetDate())},changeToNow:function(){this.date.setTime(+new Date),this.$emit("pick",new Date(this.date.getTime())),this.resetDate()},confirm:function(){this.date.setMilliseconds(0),this.$emit("pick",this.date)},resetView:function(){"month"===this.selectionMode?this.currentView="month":"year"===this.selectionMode?this.currentView="year":this.currentView="date","week"!==this.selectionMode&&(this.year=this.date.getFullYear(),this.month=this.date.getMonth())},handleEnter:function(){document.body.addEventListener("keydown",this.handleKeyDown)},handleLeave:function(){this.$refs.timepicker&&this.$refs.timepicker.$emit("pick"),this.$emit("dodestory"),document.body.removeEventListener("keydown",this.handleKeyDown)},handleKeyDown:function(e){var t=e.keyCode,i=[38,40,37,39];this.visible&&!this.timePickerVisible&&(i.indexOf(t)!==-1&&(this.handleKeyControl(t),event.stopPropagation(),event.preventDefault()),13===t&&(this.confirm(),event.stopPropagation(),event.preventDefault()))},handleKeyControl:function(e){for(var t={year:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setFullYear(e.getFullYear()+t)}},month:{38:-4,40:4,37:-1,39:1,offset:function(e,t){return e.setMonth(e.getMonth()+t)}},week:{38:-1,40:1,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+7*t)}},day:{38:-7,40:7,37:-1,39:1,offset:function(e,t){return e.setDate(e.getDate()+t)}}},i=this.selectionMode,n=31536e6,s=this.date.getTime(),o=new Date(this.date.getTime());Math.abs(s-o.getTime())<=n;){var r=t[i];if(r.offset(o,r[e]),"function"!=typeof this.disabledDate||!this.disabledDate(o)){this.date=o;break}}}},components:{TimePicker:c.default,YearTable:h.default,MonthTable:p.default,DateTable:v.default,ElInput:l.default},mounted:function(){this.date&&!this.year&&(this.year=this.date.getFullYear(),this.month=this.date.getMonth())},data:function(){return{popperClass:"",date:this.$options.defaultValue?new Date(this.$options.defaultValue):new Date,value:"",showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",firstDayOfWeek:7,year:null,month:null,week:null,showWeekNumber:!1,timePickerVisible:!1,format:""}},computed:{footerVisible:function(){return this.showTime},visibleTime:{get:function(){return(0,s.formatDate)(this.date,this.timeFormat)},set:function(e){if(e){var t=(0,s.parseDate)(e,this.timeFormat);t&&(t.setFullYear(this.date.getFullYear()),t.setMonth(this.date.getMonth()),t.setDate(this.date.getDate()),this.date=t,this.$refs.timepicker.value=t,this.timePickerVisible=!1)}}},visibleDate:{get:function(){return(0,s.formatDate)(this.date,this.dateFormat)},set:function(e){var t=(0,s.parseDate)(e,this.dateFormat);t&&("function"==typeof this.disabledDate&&this.disabledDate(t)||(t.setHours(this.date.getHours()),t.setMinutes(this.date.getMinutes()),t.setSeconds(this.date.getSeconds()),this.date=t,this.resetView()))}},yearLabel:function(){var e=this.year;if(!e)return"";var t=this.t("el.datepicker.year");if("year"===this.currentView){var i=10*Math.floor(e/10);return t?i+" "+t+" - "+(i+9)+" "+t:i+" - "+(i+9)}return this.year+" "+t},timeFormat:function(){return this.format&&this.format.indexOf("ss")===-1?"HH:mm":"HH:mm:ss"},dateFormat:function(){return this.format?this.format.replace("HH","").replace(":mm","").replace(":ss","").trim():"yyyy-MM-dd"}}}},function(e,t,i){var n=i(13)(i(817),i(821),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(812),o=i(668),r=n(o);t.default={mixins:[r.default],components:{TimeSpinner:i(818)},props:{date:{default:function(){return new Date}},visible:Boolean},watch:{visible:function(e){var t=this;this.currentVisible=e,e&&(this.oldHours=this.hours,this.oldMinutes=this.minutes,this.oldSeconds=this.seconds,this.$nextTick(function(){return t.$refs.spinner.emitSelectRange("hours")}))},value:function(e){var t=this,i=void 0;e instanceof Date?i=(0,s.limitRange)(e,this.selectableRange):e||(i=new Date),this.handleChange({hours:i.getHours(),minutes:i.getMinutes(),seconds:i.getSeconds()},!0),this.$nextTick(function(e){return t.adjustScrollTop()})},selectableRange:function(e){this.$refs.spinner.selectableRange=e},date:function(e){e&&(this.currentDate=e,this.reinitDate())}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",hours:0,minutes:0,seconds:0,oldHours:0,oldMinutes:0,oldSeconds:0,selectableRange:[],currentDate:this.$options.defaultValue||this.date||new Date,currentVisible:this.visible||!1,selectionRange:[0,2],disabled:!1}},computed:{showSeconds:function(){return(this.format||"").indexOf("ss")!==-1}},methods:{handleClear:function(){this.$emit("pick","",!1,!0)},handleCancel:function(){this.currentDate.setHours(this.oldHours),this.currentDate.setMinutes(this.oldMinutes),this.currentDate.setSeconds(this.oldSeconds),this.hours=this.currentDate.getHours(),this.minutes=this.currentDate.getMinutes(),this.seconds=this.currentDate.getSeconds();var e=new Date((0,s.limitRange)(this.currentDate,this.selectableRange,"HH:mm:ss"));this.$emit("pick",e,!1,!0)},handleChange:function(e,t){void 0!==e.hours&&(this.currentDate.setHours(e.hours),this.hours=this.currentDate.getHours()),void 0!==e.minutes&&(this.currentDate.setMinutes(e.minutes),this.minutes=this.currentDate.getMinutes()),void 0!==e.seconds&&(this.currentDate.setSeconds(e.seconds),this.seconds=this.currentDate.getSeconds()),this.handleConfirm(!0,null,t)},setSelectionRange:function(e,t){this.$emit("select-range",e,t),this.selectionRange=[e,t]},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments[1],i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(!t){var n=new Date((0,s.limitRange)(this.currentDate,this.selectableRange,"HH:mm:ss"));this.$emit("pick",n,e,!i,!1)}},adjustScrollTop:function(){return this.$refs.spinner.adjustScrollTop()},scrollDown:function(e){this.$refs.spinner.scrollDown(e)},changeSelectionRange:function(e){var t=[0,3].concat(this.showSeconds?[6]:[]),i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=t.indexOf(this.selectionRange[0]),s=(n+e+t.length)%t.length;this.$refs.spinner.emitSelectRange(i[s])},reinitDate:function(){this.hours=this.currentDate.getHours(),this.minutes=this.currentDate.getMinutes(),this.seconds=this.currentDate.getSeconds()}},created:function(){this.reinitDate()},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}}},function(e,t,i){var n=i(13)(i(819),i(820),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(812),o=i(690),r=n(o);t.default={components:{ElScrollbar:r.default},props:{hours:{type:Number,default:0},minutes:{type:Number,default:0},seconds:{type:Number,default:0},showSeconds:{type:Boolean,default:!0}},watch:{hoursPrivate:function(e,t){e>=0&&e<=23||(this.hoursPrivate=t),this.adjustElTop("hour",e),this.$emit("change",{hours:e})},minutesPrivate:function(e,t){e>=0&&e<=59||(this.minutesPrivate=t),this.adjustElTop("minute",e),this.$emit("change",{minutes:e})},secondsPrivate:function(e,t){e>=0&&e<=59||(this.secondsPrivate=t),this.adjustElTop("second",e),this.$emit("change",{seconds:e})}},computed:{hoursList:function(){return(0,s.getRangeHours)(this.selectableRange)},hourEl:function(){return this.$refs.hour.wrap},minuteEl:function(){return this.$refs.minute.wrap},secondEl:function(){return this.$refs.second.wrap}},data:function(){return{hoursPrivate:0,minutesPrivate:0,secondsPrivate:0,selectableRange:[],currentScrollbar:null}},mounted:function(){var e=this;this.$nextTick(function(){e.bindScrollEvent()})},methods:{handleClick:function(e,t,i){t.disabled||(this[e+"Private"]=t.value>=0?t.value:t,this.emitSelectRange(e))},emitSelectRange:function(e){"hours"===e?(this.$emit("select-range",0,2),this.adjustElTop("minute",this.minutes),this.adjustElTop("second",this.seconds)):"minutes"===e?(this.$emit("select-range",3,5),this.adjustElTop("hour",this.hours),this.adjustElTop("second",this.seconds)):"seconds"===e&&(this.$emit("select-range",6,8),this.adjustElTop("minute",this.minutes),this.adjustElTop("hour",this.hours)),this.currentScrollbar=e},bindScrollEvent:function(){var e=this,t=function(t){e[t+"El"].onscroll=function(i){e.handleScroll(t,i)}};t("hour"),t("minute"),t("second")},handleScroll:function(e){var t={};t[e+"s"]=Math.min(Math.floor((this[e+"El"].scrollTop-80)/32+3),""+e=="hour"?23:59),this.$emit("change",t)},adjustScrollTop:function(){this.adjustElTop("hour",this.hours),this.adjustElTop("minute",this.minutes),this.adjustElTop("second",this.seconds)},adjustElTop:function(e,t){this[e+"El"]&&(this[e+"El"].scrollTop=Math.max(0,32*(t-2.5)+80))},scrollDown:function(e){var t;this.currentScrollbar||this.emitSelectRange("hours");var i=this.currentScrollbar,n=this.hoursList,s=this[i];if("hours"===this.currentScrollbar){var o=Math.abs(e);e=e>0?1:-1;for(var r=n.length;r--&&o;)s=(s+e+n.length)%n.length,n[s]||o--;if(n[s])return}else s=(s+e+60)%60;this.$emit("change",(t={},t[i]=s,t)),this.adjustElTop(i.slice(0,-1),s)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-time-spinner",class:{"has-seconds":e.showSeconds}},[i("el-scrollbar",{ref:"hour",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("hours")}}},e._l(e.hoursList,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.hours,disabled:t},attrs:{"track-by":"hour"},on:{click:function(i){e.handleClick("hours",{value:n,disabled:t},!0)}}},[e._v(e._s(("0"+n).slice(-2)))])})),i("el-scrollbar",{ref:"minute",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("minutes")}}},e._l(60,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.minutes},on:{click:function(t){e.handleClick("minutes",n,!0)}}},[e._v(e._s(("0"+n).slice(-2)))])})),i("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.showSeconds,expression:"showSeconds"}],ref:"second",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("seconds")}}},e._l(60,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.seconds},on:{click:function(t){e.handleClick("seconds",n,!0)}}},[e._v(e._s(("0"+n).slice(-2)))])}))],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t; -return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.currentVisible,expression:"currentVisible"}],staticClass:"el-time-panel el-popper",class:e.popperClass},[i("div",{staticClass:"el-time-panel__content",class:{"has-seconds":e.showSeconds}},[i("time-spinner",{ref:"spinner",attrs:{"show-seconds":e.showSeconds,hours:e.hours,minutes:e.minutes,seconds:e.seconds},on:{change:e.handleChange,"select-range":e.setSelectionRange}})],1),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:e.handleCancel}},[e._v(e._s(e.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn",class:{confirm:!e.disabled},attrs:{type:"button"},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(823),i(824),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(292);t.default={props:{disabledDate:{},date:{},year:{}},computed:{startYear:function(){return 10*Math.floor(this.year/10)}},methods:{getCellStyle:function(e){var t={},i=new Date(e,0,1,0),n=new Date(i);n.setFullYear(e+1);var s=!1;if("function"==typeof this.disabledDate){for(;i=1&&e<=7}},date:{},year:{},month:{},week:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1,row:null,column:null}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return e>3?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return l.concat(l).slice(e,e+7)},monthDate:function(){return this.date.getDate()},startDate:function(){return(0,s.getStartDateOfMonth)(this.year,this.month)},rows:function e(){var t=new Date(this.year,this.month,1),i=(0,s.getFirstDayOfMonth)(t),n=(0,s.getDayCountOfMonth)(t.getFullYear(),t.getMonth()),o=(0,s.getDayCountOfMonth)(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);i=0===i?7:i;for(var r=this.offsetDay,e=this.tableRows,a=1,l=void 0,c=this.startDate,d=this.disabledDate,h=u(new Date),f=0;f<6;f++){var p=e[f];this.showWeekNumber&&(p[0]||(p[0]={type:"week",text:(0,s.getWeekNumber)(new Date(c.getTime()+s.DAY_DURATION*(7*f+1)))}));for(var m=0;m<7;m++){var v=p[this.showWeekNumber?m+1:m];v||(v={row:f,column:m,type:"normal",inRange:!1,start:!1,end:!1}),v.type="normal";var g=7*f+m,y=c.getTime()+s.DAY_DURATION*(g-r);v.inRange=y>=u(this.minDate)&&y<=u(this.maxDate),v.start=this.minDate&&y===u(this.minDate),v.end=this.maxDate&&y===u(this.maxDate);var b=y===h;b&&(v.type="today"),f>=0&&f<=1?m+7*f>=i+r?(v.text=a++,2===a&&(l=7*f+m)):(v.text=o-(i+r-m%7)+1+7*f,v.type="prev-month"):a<=n?(v.text=a++,2===a&&(l=7*f+m)):(v.text=a++-n,v.type="next-month"),v.disabled="function"==typeof d&&d(new Date(y)),this.$set(p,this.showWeekNumber?m+1:m,v)}if("week"===this.selectionMode){var _=this.showWeekNumber?1:0,x=this.showWeekNumber?7:6,C=this.isWeekActive(p[_+1]);p[_].inRange=C,p[_].start=C,p[x].inRange=C,p[x].end=C}}return e.firstDayPosition=l,e}},watch:{"rangeState.endDate":function(e){this.markRange(e)},minDate:function(e,t){e&&!t?(this.rangeState.selecting=!0,this.markRange(e)):e?this.markRange():(this.rangeState.selecting=!1,this.markRange(e))},maxDate:function(e,t){e&&!t&&(this.rangeState.selecting=!1,this.markRange(e),this.$emit("pick",{minDate:this.minDate,maxDate:this.maxDate},!0,!1))}},data:function(){return{tableRows:[[],[],[],[],[],[]]}},methods:{getCellClasses:function(e){var t=this.selectionMode,i=this.monthDate,n=[];return"normal"!==e.type&&"today"!==e.type||e.disabled?n.push(e.type):(n.push("available"),"today"===e.type&&n.push("today")),"day"!==t||"normal"!==e.type&&"today"!==e.type||Number(this.year)!==this.date.getFullYear()||this.month!==this.date.getMonth()||i!==Number(e.text)||n.push("current"),!e.inRange||"normal"!==e.type&&"today"!==e.type&&"week"!==this.selectionMode||(n.push("in-range"),e.start&&n.push("start-date"),e.end&&n.push("end-date")),e.disabled&&n.push("disabled"),n.join(" ")},getDateOfCell:function(e,t){var i=this.startDate;return new Date(i.getTime()+(7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay)*s.DAY_DURATION)},getCellByDate:function(e){var t=this.startDate,i=this.rows,n=(e-t)/s.DAY_DURATION,o=i[Math.floor(n/7)];return this.showWeekNumber?o[n%7+1]:o[n%7]},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),i=t.getFullYear(),n=t.getMonth();return"prev-month"===e.type&&(t.setMonth(0===n?11:n-1),t.setFullYear(0===n?i-1:i)),"next-month"===e.type&&(t.setMonth(11===n?0:n+1),t.setFullYear(11===n?i+1:i)),t.setDate(parseInt(e.text,10)),(0,s.getWeekNumber)(t)===this.week},markRange:function(e){var t=this.startDate;e||(e=this.maxDate);for(var i=this.rows,n=this.minDate,o=0,r=i.length;o=u(n)&&f<=u(e),d.start=n&&f===u(n.getTime()),d.end=e&&f===u(e.getTime())}},handleMouseMove:function(e){if(this.rangeState.selecting){this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:this.rangeState});var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.cellIndex,n=t.parentNode.rowIndex-1,s=this.rangeState,o=s.row,r=s.column;o===n&&r===i||(this.rangeState.row=n,this.rangeState.column=i,this.rangeState.endDate=this.getDateOfCell(n,i))}}},handleClick:function(e){var t=this,i=e.target;if("SPAN"===i.tagName&&(i=i.parentNode.parentNode),"DIV"===i.tagName&&(i=i.parentNode),"TD"===i.tagName&&!(0,o.hasClass)(i,"disabled")&&!(0,o.hasClass)(i,"week")){var n=this.selectionMode;"week"===n&&(i=i.parentNode.cells[1]);var r=Number(this.year),a=Number(this.month),l=i.cellIndex,u=i.parentNode.rowIndex,c=this.rows[u-1][l],d=c.text,h=i.className,f=new Date(r,a,1);if(h.indexOf("prev")!==-1?(0===a?(r-=1,a=11):a-=1,f.setFullYear(r),f.setMonth(a)):h.indexOf("next")!==-1&&(11===a?(r+=1,a=0):a+=1,f.setFullYear(r),f.setMonth(a)),f.setDate(parseInt(d,10)),"range"===this.selectionMode){if(this.minDate&&this.maxDate){var p=new Date(f.getTime()),m=null;this.$emit("pick",{minDate:p,maxDate:m},!1),this.rangeState.selecting=!0,this.markRange(this.minDate),this.$nextTick(function(){t.handleMouseMove(e)})}else if(this.minDate&&!this.maxDate)if(f>=this.minDate){var v=new Date(f.getTime());this.rangeState.selecting=!1,this.$emit("pick",{minDate:this.minDate,maxDate:v})}else{var g=new Date(f.getTime());this.$emit("pick",{minDate:g,maxDate:this.maxDate},!1)}else if(!this.minDate){var y=new Date(f.getTime());this.$emit("pick",{minDate:y,maxDate:this.maxDate},!1),this.rangeState.selecting=!0,this.markRange(this.minDate)}}else if("day"===n)this.$emit("pick",f);else if("week"===n){var b=(0,s.getWeekNumber)(f),_=f.getFullYear()+"w"+b;this.$emit("pick",{year:f.getFullYear(),week:b,value:_,date:f})}}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===e.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:e.handleClick,mousemove:e.handleMouseMove}},[i("tbody",[i("tr",[e.showWeekNumber?i("th",[e._v(e._s(e.t("el.datepicker.week")))]):e._e(),e._l(e.WEEKS,function(t){return i("th",[e._v(e._s(e.t("el.datepicker.weeks."+t)))])})],2),e._l(e.rows,function(t){return i("tr",{staticClass:"el-date-table__row",class:{current:e.isWeekActive(t[1])}},e._l(t,function(t){return i("td",{class:e.getCellClasses(t)},[i("div",[i("span",[e._v("\n "+e._s(t.text)+"\n ")])])])}))})],2)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-enter":e.handleEnter,"after-leave":e.handleLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker el-popper",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass]},[i("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?i("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t){return i("button",{staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(i){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])})):e._e(),i("div",{staticClass:"el-picker-panel__body"},[e.showTime?i("div",{staticClass:"el-date-picker__time-header"},[i("span",{staticClass:"el-date-picker__editor-wrap"},[i("el-input",{attrs:{placeholder:e.t("el.datepicker.selectDate"),value:e.visibleDate,size:"small"},nativeOn:{change:function(t){e.visibleDate=t.target.value}}})],1),i("span",{staticClass:"el-date-picker__editor-wrap"},[i("el-input",{ref:"input",attrs:{placeholder:e.t("el.datepicker.selectTime"),value:e.visibleTime,size:"small"},on:{focus:function(t){e.timePickerVisible=!e.timePickerVisible}},nativeOn:{change:function(t){e.visibleTime=t.target.value}}}),i("time-picker",{ref:"timepicker",attrs:{date:e.date,visible:e.timePickerVisible},on:{pick:e.handleTimePick,mounted:function(t){e.$refs.timepicker.format=e.timeFormat}}})],1)]):e._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==e.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header",class:{"el-date-picker__header--bordered":"year"===e.currentView||"month"===e.currentView}},[i("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.prevYear}}),i("button",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.prevMonth}}),i("span",{staticClass:"el-date-picker__header-label",on:{click:e.showYearPicker}},[e._v(e._s(e.yearLabel))]),i("span",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{active:"month"===e.currentView},on:{click:e.showMonthPicker}},[e._v(e._s(e.t("el.datepicker.month"+(e.month+1))))]),i("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.nextYear}}),i("button",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.nextMonth}})]),i("div",{staticClass:"el-picker-panel__content"},[i("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],attrs:{year:e.year,month:e.month,date:e.date,week:e.week,"selection-mode":e.selectionMode,"first-day-of-week":e.firstDayOfWeek,"disabled-date":e.disabledDate},on:{pick:e.handleDatePick}}),i("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===e.currentView,expression:"currentView === 'year'"}],ref:"yearTable",attrs:{year:e.year,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleYearPick}}),i("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===e.currentView,expression:"currentView === 'month'"}],attrs:{month:e.month,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleMonthPick}})],1)])],2),i("div",{directives:[{name:"show",rawName:"v-show",value:e.footerVisible&&"date"===e.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[i("a",{staticClass:"el-picker-panel__link-btn",attrs:{href:"JavaScript:"},on:{click:e.changeToNow}},[e._v(e._s(e.t("el.datepicker.now")))]),i("button",{staticClass:"el-picker-panel__btn",attrs:{type:"button"},on:{click:e.confirm}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(833),i(834),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(812),o=i(668),r=n(o),a=i(816),l=n(a),u=i(828),c=n(u),d=i(669),h=n(d),f=function(e){return Array.isArray(e)?e[0]?new Date(e[0]):new Date:new Date(e)};t.default={mixins:[r.default],computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting)},leftLabel:function(){return this.date.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.date.getMonth()+1))},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.rightDate.getMonth()+1))},leftYear:function(){return this.date.getFullYear()},leftMonth:function(){return this.date.getMonth()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},minVisibleDate:function(){return this.minDate?(0,s.formatDate)(this.minDate):""},maxVisibleDate:function(){return this.maxDate||this.minDate?(0,s.formatDate)(this.maxDate||this.minDate):""},minVisibleTime:function(){return this.minDate?(0,s.formatDate)(this.minDate,"HH:mm:ss"):""},maxVisibleTime:function(){return this.maxDate||this.minDate?(0,s.formatDate)(this.maxDate||this.minDate,"HH:mm:ss"):""},rightDate:function(){var e=new Date(this.date),t=e.getMonth();return e.setDate(1),11===t?(e.setFullYear(e.getFullYear()+1),e.setMonth(0)):e.setMonth(t+1),e},timeFormat:function(){return this.format&&this.format.indexOf("ss")===-1?"HH:mm":"HH:mm:ss"}},data:function(){return{popperClass:"",date:this.$options.defaultValue?f(this.$options.defaultValue):new Date,minDate:"",maxDate:"",rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",value:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,format:""}},watch:{minDate:function(){var e=this;this.$nextTick(function(){if(e.maxDate&&e.maxDatethis.minDate&&(this.maxDate=new Date(o.getTime()),this.minDate&&this.minDate>this.maxDate&&(this.minDate=null))}},handleTimeChange:function(e,t){var i=e.target.value,n=(0,s.parseDate)(i,"HH:mm:ss");if(n){var o=new Date("min"===t?this.minDate:this.maxDate);o&&(o.setHours(n.getHours()),o.setMinutes(n.getMinutes()),o.setSeconds(n.getSeconds())),"min"===t?othis.minDate&&(this.maxDate=new Date(o.getTime())),this.$refs[t+"TimePicker"].value=o,this[t+"TimePickerVisible"]=!1}},handleRangePick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];this.maxDate===e.maxDate&&this.minDate===e.minDate||(this.onPick&&this.onPick(e),this.maxDate=e.maxDate,this.minDate=e.minDate,t&&!this.showTime&&this.handleConfirm(!1,i))},changeToToday:function(){this.date=new Date},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},resetView:function(){this.minTimePickerVisible=!1,this.maxTimePickerVisible=!1},setTime:function(e,t){var i=new Date(e.getTime()),n=t.getHours(),s=t.getMinutes(),o=t.getSeconds();return i.setHours(n),i.setMinutes(s),i.setSeconds(o),new Date(i.getTime())},handleMinTimePick:function(e,t,i,n){this.minDate=this.minDate||new Date,e&&(this.minDate=this.setTime(this.minDate,e)),n||(this.minTimePickerVisible=t)},handleMaxTimePick:function(e,t,i,n){if(!this.maxDate){var s=new Date;s>=this.minDate&&(this.maxDate=new Date)}this.maxDate&&e&&(this.maxDate=this.setTime(this.maxDate,e)),n||(this.maxTimePickerVisible=t)},prevMonth:function(){this.date=(0,s.prevMonth)(this.date)},nextMonth:function(){this.date=(0,s.nextMonth)(this.date)},nextYear:function(){var e=this.date;e.setFullYear(e.getFullYear()+1),this.resetDate()},prevYear:function(){var e=this.date;e.setFullYear(e.getFullYear()-1),this.resetDate()},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.$emit("pick",[this.minDate,this.maxDate],e,t)},resetDate:function(){this.date=new Date(this.date)}},components:{TimePicker:l.default,DateTable:c.default,ElInput:h.default}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass]},[i("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?i("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t){return i("button",{staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(i){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])})):e._e(),i("div",{staticClass:"el-picker-panel__body"},[e.showTime?i("div",{staticClass:"el-date-range-picker__time-header"},[i("span",{staticClass:"el-date-range-picker__editors-wrap"},[i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.startDate"),value:e.minVisibleDate},nativeOn:{input:function(t){e.handleDateInput(t,"min")},change:function(t){e.handleDateChange(t,"min")}}})],1),i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.startTime"),value:e.minVisibleTime},on:{focus:function(t){e.minTimePickerVisible=!e.minTimePickerVisible}},nativeOn:{change:function(t){e.handleTimeChange(t,"min")}}}),i("time-picker",{ref:"minTimePicker",attrs:{date:e.minDate,visible:e.minTimePickerVisible},on:{pick:e.handleMinTimePick,mounted:function(t){e.$refs.minTimePicker.format=e.timeFormat}}})],1)]),i("span",{staticClass:"el-icon-arrow-right"}),i("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.endDate"),value:e.maxVisibleDate,readonly:!e.minDate},nativeOn:{input:function(t){e.handleDateInput(t,"max")},change:function(t){e.handleDateChange(t,"max")}}})],1),i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{ref:"maxInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.endTime"),value:e.maxVisibleTime,readonly:!e.minDate},on:{focus:function(t){e.minDate&&(e.maxTimePickerVisible=!e.maxTimePickerVisible)}},nativeOn:{change:function(t){e.handleTimeChange(t,"max")}}}),i("time-picker",{ref:"maxTimePicker",attrs:{date:e.maxDate,visible:e.maxTimePickerVisible},on:{pick:e.handleMaxTimePick,mounted:function(t){e.$refs.maxTimePicker.format=e.timeFormat}}})],1)])]):e._e(),i("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[i("div",{staticClass:"el-date-range-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.prevYear}}),i("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.prevMonth}}),i("div",[e._v(e._s(e.leftLabel))])]),i("date-table",{attrs:{"selection-mode":"range",date:e.date,year:e.leftYear,month:e.leftMonth,"min-date":e.minDate,"max-date":e.maxDate,"range-state":e.rangeState,"disabled-date":e.disabledDate,"first-day-of-week":e.firstDayOfWeek},on:{changerange:e.handleChangeRange,pick:e.handleRangePick}})],1),i("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[i("div",{staticClass:"el-date-range-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.nextYear}}),i("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.nextMonth}}),i("div",[e._v(e._s(e.rightLabel))])]),i("date-table",{attrs:{"selection-mode":"range",date:e.rightDate,year:e.rightYear,month:e.rightMonth,"min-date":e.minDate,"max-date":e.maxDate,"range-state":e.rangeState,"disabled-date":e.disabledDate,"first-day-of-week":e.firstDayOfWeek},on:{changerange:e.handleChangeRange,pick:e.handleRangePick}})],1)])],2),e.showTime?i("div",{staticClass:"el-picker-panel__footer"},[i("a",{staticClass:"el-picker-panel__link-btn",on:{click:e.handleClear}},[e._v(e._s(e.t("el.datepicker.clear")))]),i("button",{staticClass:"el-picker-panel__btn",attrs:{type:"button",disabled:e.btnDisabled},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])]):e._e()])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(836),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(810),o=n(s),r=i(837),a=n(r);t.default={mixins:[o.default],name:"ElTimeSelect",beforeCreate:function(){this.type="time-select",this.panel=a.default},methods:{handleKeydown:function(e){var t=e.keyCode;if(9===t||27===t||13===t){var i=this.$refs.reference,n=this.picker.items.map(function(e){return e.value}).indexOf(i.currentValue),s=n!==-1;return s?this.picker.handleClick(this.picker.items[n]):i.currentValue=this.currentValue,this.pickerVisible=!1,i.$refs.input.blur(),void e.stopPropagation()}if(38===t||40===t){var o={40:1,38:-1},r=o[t.toString()];return this.picker.scrollDown(r),this.currentValue=this.picker.value,void e.stopPropagation()}}}}},function(e,t,i){var n=i(13)(i(838),i(839),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(690),o=n(s),r=i(697),a=n(r),l=function(e){var t=(e||"").split(":");if(t.length>=2){var i=parseInt(t[0],10),n=parseInt(t[1],10);return{hours:i,minutes:n}}return null},u=function(e,t){var i=l(e),n=l(t),s=i.minutes+60*i.hours,o=n.minutes+60*n.hours;return s===o?0:s>o?1:-1},c=function(e){return(e.hours<10?"0"+e.hours:e.hours)+":"+(e.minutes<10?"0"+e.minutes:e.minutes)},d=function(e,t){var i=l(e),n=l(t),s={hours:i.hours,minutes:i.minutes};return s.minutes+=n.minutes,s.hours+=n.hours,s.hours+=Math.floor(s.minutes/60),s.minutes=s.minutes%60,c(s)};t.default={components:{ElScrollbar:o.default},watch:{value:function(e){var t=this;e&&(this.minTime&&u(e,this.minTime)<0?this.$emit("pick","",!1,!1):this.maxTime&&u(e,this.maxTime)>0&&this.$emit("pick","",!1,!1),this.$nextTick(function(){return t.scrollToOption()}))}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick","",!1,!1)},scrollToOption:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"selected",t=this.$refs.popper.querySelector(".el-picker-panel__content");(0,a.default)(t,t.getElementsByClassName(e)[0])},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.scrollToOption()})},scrollDown:function(e){var t=this.items,i=t.map(function(e){return e.value}).indexOf(this.value),n=t.length,s=Math.abs(e);for(e=e>0?1:-1;n--&&s;){i=(i+e+t.length)%t.length;var o=t[i];o.disabled||s--}t[i].disabled||(this.value=t[i].value,this.$emit("pick",this.value,!0))}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e=this.start,t=this.end,i=this.step,n=[];if(e&&t&&i)for(var s=e;u(s,t)<=0;)n.push({value:s,disabled:u(s,this.minTime||"-1:-1")<=0||u(s,this.maxTime||"100:100")>=0}),s=d(s,i);return n}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":e.handleMenuEnter,"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],ref:"popper",staticClass:"el-picker-panel time-select el-popper",class:e.popperClass,style:{width:e.width+"px"}},[i("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},e._l(e.items,function(t){return i("div",{staticClass:"time-select-item",class:{selected:e.value===t.value,disabled:t.disabled},attrs:{disabled:t.disabled},on:{click:function(i){e.handleClick(t)}}},[e._v(e._s(t.value))])}))],1)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(841),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(810),o=n(s),r=i(816),a=n(r),l=i(842),u=n(l);t.default={mixins:[o.default],name:"ElTimePicker",props:{isRange:Boolean},data:function(){return{type:""}},watch:{isRange:function(e){this.picker?(this.unmountPicker(),this.type=e?"timerange":"time",this.panel=e?u.default:a.default,this.mountPicker()):(this.type=e?"timerange":"time",this.panel=e?u.default:a.default)}},created:function(){this.type=this.isRange?"timerange":"time",this.panel=this.isRange?u.default:a.default},methods:{handleKeydown:function(e){var t=e.keyCode;if(9===t||27===t)return this.pickerVisible=!1, -void e.stopPropagation();var i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.picker.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var s=i[t];return this.picker.scrollDown(s),void e.preventDefault()}return 13===t?(!this.isRange&&this.picker.handleConfirm(),this.$refs.reference.$refs?this.$refs.reference.$refs.input.blur():[].slice.call(this.$refs.reference.querySelectorAll("input")).forEach(function(e){e.blur()}),void e.preventDefault()):void 0}}}},function(e,t,i){var n=i(13)(i(843),i(844),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(812),o=i(668),r=n(o),a=i(818),l=n(a),u=(0,s.parseDate)("00:00:00","HH:mm:ss"),c=(0,s.parseDate)("23:59:59","HH:mm:ss"),d=function(e,t){var i=3600*e.getHours()+60*e.getMinutes()+e.getSeconds(),n=3600*t.getHours()+60*t.getMinutes()+t.getSeconds();return i>n},h=function e(t){t=Array.isArray(t)?t:[t];var i=t[0]||new Date,n=new Date;n.setHours(n.getHours()+1);var s=t[1]||n;return i>s?e():{minTime:i,maxTime:s}};t.default={mixins:[r.default],components:{TimeSpinner:l.default},computed:{showSeconds:function(){return(this.format||"").indexOf("ss")!==-1},offset:function(){return this.showSeconds?11:8},spinner:function(){return this.selectionRange[0]this.maxTime||(u.setFullYear(this.minTime.getFullYear()),u.setMonth(this.minTime.getMonth(),this.minTime.getDate()),c.setFullYear(this.maxTime.getFullYear()),c.setMonth(this.maxTime.getMonth(),this.maxTime.getDate()),this.$refs.minSpinner.selectableRange=[[u,this.maxTime]],this.$refs.maxSpinner.selectableRange=[[this.minTime,c]],this.handleConfirm(!0,!1,e))},handleMaxChange:function(e,t){void 0!==e.hours&&(this.maxTime.setHours(e.hours),this.maxHours=this.maxTime.getHours()),void 0!==e.minutes&&(this.maxTime.setMinutes(e.minutes),this.maxMinutes=this.maxTime.getMinutes()),void 0!==e.seconds&&(this.maxTime.setSeconds(e.seconds),this.maxSeconds=this.maxTime.getSeconds()),this.handleChange()},handleMinChange:function(e,t){void 0!==e.hours&&(this.minTime.setHours(e.hours),this.minHours=this.minTime.getHours()),void 0!==e.minutes&&(this.minTime.setMinutes(e.minutes),this.minMinutes=this.minTime.getMinutes()),void 0!==e.seconds&&(this.minTime.setSeconds(e.seconds),this.minSeconds=this.minTime.getSeconds()),this.handleChange()},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t,"min"),this.selectionRange=[e,t]},setMaxSelectionRange:function(e,t){this.$emit("select-range",e,t,"max"),this.selectionRange=[e+this.offset,t+this.offset]},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n=this.$refs.minSpinner.selectableRange,o=this.$refs.maxSpinner.selectableRange;this.minTime=(0,s.limitRange)(this.minTime,n),this.maxTime=(0,s.limitRange)(this.maxTime,o),t||this.$emit("pick",[this.minTime,this.maxTime],e,!i)},adjustScrollTop:function(){this.$refs.minSpinner.adjustScrollTop(),this.$refs.maxSpinner.adjustScrollTop()},scrollDown:function(e){this.spinner.scrollDown(e)},changeSelectionRange:function(e){var t=this.showSeconds?[0,3,6,11,14,17]:[0,3,8,11],i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=t.indexOf(this.selectionRange[0]),s=(n+e+t.length)%t.length,o=t.length/2;s-1}},openDelay:{type:Number,default:0},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},transition:{type:String,default:"fade-in-linear"}},watch:{showPopper:function(e,t){e?this.$emit("show"):this.$emit("hide")},"$refs.reference":{deep:!0,handler:function(e){console.log(e)}}},mounted:function(){var e=this.reference||this.$refs.reference,t=this.popper||this.$refs.popper;if(!e&&this.$slots.reference&&this.$slots.reference[0]&&(e=this.referenceElm=this.$slots.reference[0].elm),"click"===this.trigger)(0,r.on)(e,"click",this.doToggle),(0,r.on)(document,"click",this.handleDocumentClick);else if("hover"===this.trigger)(0,r.on)(e,"mouseenter",this.handleMouseEnter),(0,r.on)(t,"mouseenter",this.handleMouseEnter),(0,r.on)(e,"mouseleave",this.handleMouseLeave),(0,r.on)(t,"mouseleave",this.handleMouseLeave);else if("focus"===this.trigger){var i=!1;if([].slice.call(e.children).length)for(var n=e.childNodes,s=n.length,o=0;o0&&!function(){p=v.shift();var t=p.options;for(var i in t)t.hasOwnProperty(i)&&(m[i]=t[i]);void 0===t.callback&&(m.callback=g);var n=m.callback;m.callback=function(t,i){n(t,i),e()},(0,d.isVNode)(m.message)?(m.$slots.default=[m.message],m.message=null):delete m.$slots.default,["modal","showClose","closeOnClickModal","closeOnPressEscape","closeOnHashChange"].forEach(function(e){void 0===m[e]&&(m[e]=!0)}),document.body.appendChild(m.$el),r.default.nextTick(function(){m.visible=!0})}()},_=function e(t,i){if(!r.default.prototype.$isServer)return"string"==typeof t||(0,d.isVNode)(t)?(t={message:t},"string"==typeof arguments[1]&&(t.title=arguments[1])):t.callback&&!i&&(i=t.callback),"undefined"!=typeof Promise?new Promise(function(n,s){v.push({options:(0,c.default)({},h,e.defaults,t),callback:i,resolve:n,reject:s}),b()}):(v.push({options:(0,c.default)({},h,e.defaults,t),callback:i}),void b())};_.setDefaults=function(e){_.defaults=e},_.alert=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))?(i=t,t=""):void 0===t&&(t=""),_((0,c.default)({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},i))},_.confirm=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))?(i=t,t=""):void 0===t&&(t=""),_((0,c.default)({title:t,message:e,$type:"confirm",showCancelButton:!0},i))},_.prompt=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))?(i=t,t=""):void 0===t&&(t=""),_((0,c.default)({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},i))},_.close=function(){m.visible=!1,v=[],p=null},t.default=_,t.MessageBox=_},function(e,t,i){var n=i(13)(i(853),i(854),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(678),o=n(s),r=i(668),a=n(r),l=i(669),u=n(l),c=i(715),d=n(c),h=i(292),f=i(15),p={success:"circle-check",info:"information",warning:"warning",error:"circle-cross"};t.default={mixins:[o.default,a.default],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0},closeOnHashChange:{default:!0},center:{default:!1,type:Boolean},roundButton:{default:!1,type:Boolean}},components:{ElInput:u.default,ElButton:d.default},computed:{typeClass:function(){return this.type&&p[this.type]?"el-icon-"+p[this.type]:""},confirmButtonClasses:function(){return"el-button--primary "+this.confirmButtonClass},cancelButtonClasses:function(){return""+this.cancelButtonClass}},methods:{getSafeClose:function(){var e=this,t=this.uid;return function(){e.$nextTick(function(){t===e.uid&&e.doClose()})}},doClose:function(){var e=this;this.visible&&(this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(function(){e.modal&&"hidden"!==e.bodyOverflow&&(document.body.style.overflow=e.bodyOverflow,document.body.style.paddingRight=e.bodyPaddingRight),e.bodyOverflow=null,e.bodyPaddingRight=null},200),this.opened=!1,this.transition||this.doAfterClose(),this.action&&this.callback(this.action,this))},handleWrapperClick:function(){this.closeOnClickModal&&this.handleAction("cancel")},handleAction:function(e){("prompt"!==this.$type||"confirm"!==e||this.validate())&&(this.action=e,"function"==typeof this.beforeClose?(this.close=this.getSafeClose(),this.beforeClose(e,this,this.close)):this.doClose())},validate:function(){if("prompt"===this.$type){var e=this.inputPattern;if(e&&!e.test(this.inputValue||""))return this.editorErrorMessage=this.inputErrorMessage||(0,f.t)("el.messagebox.error"),(0,h.addClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var i=t(this.inputValue);if(i===!1)return this.editorErrorMessage=this.inputErrorMessage||(0,f.t)("el.messagebox.error"),(0,h.addClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!1;if("string"==typeof i)return this.editorErrorMessage=i,!1}}return this.editorErrorMessage="",(0,h.removeClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!0}},watch:{inputValue:{immediate:!0,handler:function(e){var t=this;this.$nextTick(function(i){"prompt"===t.$type&&null!==e&&t.validate()})}},visible:function(e){var t=this;e&&this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.$refs.input.$el.querySelector("input").focus()},500):(this.editorErrorMessage="",(0,h.removeClass)(this.$refs.input.$el.querySelector("input"),"invalid")))}},mounted:function(){this.closeOnHashChange&&window.addEventListener("hashchange",this.close)},beforeDestroy:function(){this.closeOnHashChange&&window.removeEventListener("hashchange",this.close)},data:function(){return{uid:1,title:void 0,message:"",type:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null,dangerouslyUseHTMLString:!1}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"msgbox-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-message-box__wrapper",attrs:{tabindex:"-1"},on:{click:function(t){return t.target!==t.currentTarget?null:void e.handleWrapperClick(t)}}},[i("div",{staticClass:"el-message-box",class:[e.customClass,e.center&&"el-message-box--center"]},[void 0!==e.title?i("div",{staticClass:"el-message-box__header"},[i("div",{staticClass:"el-message-box__title"},[e.typeClass&&e.center?i("div",{staticClass:"el-message-box__status",class:[e.typeClass]}):e._e(),i("span",[e._v(e._s(e.title))])]),e.showClose?i("button",{staticClass:"el-message-box__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:function(t){e.handleAction("cancel")}}},[i("i",{staticClass:"el-message-box__close el-icon-close"})]):e._e()]):e._e(),""!==e.message?i("div",{staticClass:"el-message-box__content"},[e.typeClass&&!e.center?i("div",{staticClass:"el-message-box__status",class:[e.typeClass]}):e._e(),i("div",{staticClass:"el-message-box__message"},[e._t("default",[e.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:e._s(e.message)}}):i("p",[e._v(e._s(e.message))])])],2),i("div",{directives:[{name:"show",rawName:"v-show",value:e.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[i("el-input",{ref:"input",attrs:{placeholder:e.inputPlaceholder},nativeOn:{keyup:function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?void e.handleAction("confirm"):null}},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}}),i("div",{staticClass:"el-message-box__errormsg",style:{visibility:e.editorErrorMessage?"visible":"hidden"}},[e._v(e._s(e.editorErrorMessage))])],1)]):e._e(),i("div",{staticClass:"el-message-box__btns"},[i("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showCancelButton,expression:"showCancelButton"}],class:[e.cancelButtonClasses],attrs:{loading:e.cancelButtonLoading,round:e.roundButton,size:"small"},nativeOn:{click:function(t){e.handleAction("cancel")}}},[e._v("\n "+e._s(e.cancelButtonText||e.t("el.messagebox.cancel"))+"\n ")]),i("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[e.confirmButtonClasses],attrs:{loading:e.confirmButtonLoading,round:e.roundButton,size:"small"},nativeOn:{click:function(t){e.handleAction("confirm")}}},[e._v("\n "+e._s(e.confirmButtonText||e.t("el.messagebox.confirm"))+"\n ")])],1)])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(856),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(857),i(858),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"},separatorClass:{type:String,default:""}},mounted:function(){var e=this.$el.querySelectorAll(".el-breadcrumb__item");e[e.length-1].setAttribute("aria-current","page")}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-breadcrumb",attrs:{"aria-label":"Breadcrumb",role:"navigation"}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(860),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(861),i(862),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:"",separatorClass:""}},mounted:function(){var e=this;this.separator=this.$parent.separator,this.separatorClass=this.$parent.separatorClass;var t=this;if(this.to){var i=this.$refs.link;i.setAttribute("role","link"),i.addEventListener("click",function(i){var n=e.to;t.replace?t.$router.replace(n):t.$router.push(n)})}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{staticClass:"el-breadcrumb__item"},[i("span",{ref:"link",staticClass:"el-breadcrumb__inner",attrs:{role:"link"}},[e._t("default")],2),e.separatorClass?i("i",{staticClass:"el-breadcrumb__separator",class:e.separatorClass}):i("span",{staticClass:"el-breadcrumb__separator",attrs:{role:"presentation"}},[e._v(e._s(e.separator))])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(864),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(865),i(866),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElForm",componentName:"ElForm",provide:function(){return{elForm:this}},props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,inlineMessage:Boolean,statusIcon:Boolean,showMessage:{type:Boolean,default:!0}},watch:{rules:function(){this.validate()}},data:function(){return{fields:[]}},created:function(){var e=this;this.$on("el.form.addField",function(t){t&&e.fields.push(t)}),this.$on("el.form.removeField",function(t){t.prop&&e.fields.splice(e.fields.indexOf(t),1)})},methods:{resetFields:function(){this.model&&this.fields.forEach(function(e){e.resetField()})},validate:function(e){var t=this;if(!this.model)return void console.warn("[Element Warn][Form]model is required for validate to work!");var i=!0,n=0;0===this.fields.length&&e&&e(!0),this.fields.forEach(function(s,o){s.validate("",function(s){s&&(i=!1),"function"==typeof e&&++n===t.fields.length&&e(i)})})},validateField:function(e,t){var i=this.fields.filter(function(t){return t.prop===e})[0];if(!i)throw new Error("must call validateField with valid prop string!");i.validate("",t)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("form",{staticClass:"el-form",class:[e.labelPosition?"el-form--label-"+e.labelPosition:"",{"el-form--inline":e.inline}]},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(868),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(869),i(895),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}function o(e,t){var i=e;t=t.replace(/\[(\w+)\]/g,".$1"),t=t.replace(/^\./,"");for(var n=t.split("."),s=0,o=n.length;s1&&void 0!==arguments[1]?arguments[1]:s,n=this.getFilteredRule(e);if(!n||0===n.length)return i(),!0;this.validateState="validating";var o={};o[this.prop]=n;var r=new a.default(o),l={};l[this.prop]=this.fieldValue,r.validate(l,{firstFields:!0},function(e,n){t.validateState=e?"error":"success",t.validateMessage=e?e[0].message:"",i(t.validateMessage)})},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,i=this.prop;i.indexOf(":")!==-1&&(i=i.replace(/:/,"."));var n=o(e,i);Array.isArray(t)?(this.validateDisabled=!0,n.o[n.k]=[].concat(this.initialValue)):(this.validateDisabled=!0,n.o[n.k]=this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules;return e=e?e[this.prop]:[],[].concat(t||e||[])},getFilteredRule:function(e){var t=this.getRules();return t.filter(function(t){return!t.trigger||t.trigger.indexOf(e)!==-1})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){return this.validateDisabled?void(this.validateDisabled=!1):void this.validate("change")}},mounted:function(){if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var e=this.fieldValue;Array.isArray(e)&&(e=[].concat(e)),Object.defineProperty(this,"initialValue",{value:e});var t=this.getRules();t.length&&(this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){this.rules=null,this._messages=c.messages,this.define(e)}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:{},l=arguments[2],u=e,h=n,f=l;if("function"==typeof h&&(f=h,h={}),!this.rules||0===Object.keys(this.rules).length)return void(f&&f());if(h.messages){var p=this.messages();p===c.messages&&(p=(0,c.newMessages)()),(0,a.deepMerge)(p,h.messages),h.messages=p}else h.messages=this.messages();h.error=d.error;var m=void 0,v=void 0,g={},y=h.keys||Object.keys(this.rules);y.forEach(function(t){m=i.rules[t],v=u[t],m.forEach(function(n){var s=n;"function"==typeof s.transform&&(u===e&&(u=o({},u)),v=u[t]=s.transform(v)),s="function"==typeof s?{validator:s}:o({},s),s.validator=i.getValidationMethod(s),s.field=t,s.fullField=s.fullField||t,s.type=i.getType(s),s.validator&&(g[t]=g[t]||[],g[t].push({rule:s,value:v,source:u,field:t}))})});var b={};(0,a.asyncMap)(g,h,function(e,t){function i(e,t){return o({},t,{fullField:l.fullField+"."+e})}function n(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],r=n;if(Array.isArray(r)||(r=[r]),r.length&&(0,a.warning)("async-validator:",r),r.length&&l.message&&(r=[].concat(l.message)),r=r.map((0,a.complementError)(l)),(h.first||h.fieldFirst)&&r.length)return b[l.field]=1,t(r);if(u){if(l.required&&!e.value)return r=l.message?[].concat(l.message).map((0,a.complementError)(l)):[h.error(l,(0,a.format)(h.messages.required,l.field))],t(r);var c={};if(l.defaultField)for(var d in e.value)e.value.hasOwnProperty(d)&&(c[d]=l.defaultField);c=o({},c,e.rule.fields);for(var f in c)if(c.hasOwnProperty(f)){var p=Array.isArray(c[f])?c[f]:[c[f]];c[f]=p.map(i.bind(null,f))}var m=new s(c);m.messages(h.messages),e.rule.options&&(e.rule.options.messages=h.messages,e.rule.options.error=h.error),m.validate(e.value,e.rule.options||h,function(e){t(e&&e.length?r.concat(e):e)})}else t(r)}var l=e.rule,u=!("object"!==l.type&&"array"!==l.type||"object"!==r(l.fields)&&"object"!==r(l.defaultField));u=u&&(l.required||!l.required&&e.value),l.field=e.field,l.validator(l,e.value,n,e.source,h)},function(e){t(e)})},getType:function(e){if(void 0===e.type&&e.pattern instanceof RegExp&&(e.type="pattern"),"function"!=typeof e.validator&&e.type&&!u.default.hasOwnProperty(e.type))throw new Error((0,a.format)("Unknown rule type %s",e.type));return e.type||"string"},getValidationMethod:function(e){if("function"==typeof e.validator)return e.validator;var t=Object.keys(e),i=t.indexOf("message");return i!==-1&&t.splice(i,1),1===t.length&&"required"===t[0]?u.default.required:u.default[this.getType(e)]||!1}},s.register=function(e,t){if("function"!=typeof t)throw new Error("Cannot register a validator by type, validator is not a function");u.default[e]=t},s.messages=c.messages,t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(){for(var e=arguments.length,t=Array(e),i=0;i=o)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}break;default:return e}}),a=t[n];n-1?h[a](t)||n.push(l.format(s.messages.types[a],e.fullField,e.type)):a&&("undefined"==typeof t?"undefined":r(t))!==e.type&&n.push(l.format(s.messages.types[a],e.fullField,e.type))}Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i(871),l=s(a),u=i(875),c=n(u),d={email:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},h={integer:function(e){return h.number(e)&&parseInt(e,10)===e},float:function(e){return h.number(e)&&!h.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch(e){return!1}},date:function(e){return"function"==typeof e.getTime&&"function"==typeof e.getMonth&&"function"==typeof e.getYear},number:function(e){return!isNaN(e)&&"number"==typeof e},object:function(e){return"object"===("undefined"==typeof e?"undefined":r(e))&&!h.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(d.email)},url:function(e){return"string"==typeof e&&!!e.match(d.url)},hex:function(e){return"string"==typeof e&&!!e.match(d.hex)}};t.default=o,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){var o="number"==typeof e.len,a="number"==typeof e.min,l="number"==typeof e.max,u=t,c=null,d="number"==typeof t,h="string"==typeof t,f=Array.isArray(t);return d?c="number":h?c="string":f&&(c="array"),!!c&&((h||f)&&(u=t.length),void(o?u!==e.len&&n.push(r.format(s.messages[c].len,e.fullField,e.len)):a&&!l&&ue.max?n.push(r.format(s.messages[c].max,e.fullField,e.max)):a&&l&&(ue.max)&&n.push(r.format(s.messages[c].range,e.fullField,e.min,e.max))))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(871),r=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){e[a]=Array.isArray(e[a])?e[a]:[],e[a].indexOf(t)===-1&&n.push(r.format(s.messages[a],e.fullField,e[a].join(", ")))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(871),r=n(o),a="enum";t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){e.pattern instanceof RegExp&&(e.pattern.test(t)||n.push(r.format(s.messages.pattern.mismatch,e.fullField,t,e.pattern)))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(871),r=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,a.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,o,s),void 0!==t&&r.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(874),r=n(o),a=i(871);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,a.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,o,s),void 0!==t&&(r.default.type(e,t,n,o,s),r.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(874),r=n(o),a=i(871);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var r=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,o.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,r,s),void 0!==t&&a.default.type(e,t,n,r,s)}i(r)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(871),r=i(874),a=n(r);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,a.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,o,s),(0,a.isEmptyValue)(t)||r.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(874),r=n(o),a=i(871);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,a.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,o,s),void 0!==t&&(r.default.type(e,t,n,o,s),r.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(874),r=n(o),a=i(871);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,a.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,o,s),void 0!==t&&(r.default.type(e,t,n,o,s),r.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(874),r=n(o),a=i(871);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,a.isEmptyValue)(t,"array")&&!e.required)return i();r.default.required(e,t,n,o,s,"array"),(0,a.isEmptyValue)(t,"array")||(r.default.type(e,t,n,o,s),r.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(874),r=n(o),a=i(871);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,a.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,o,s),void 0!==t&&r.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(874),r=n(o),a=i(871);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],u=e.required||!e.required&&n.hasOwnProperty(e.field);if(u){if((0,a.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,o,s),t&&r.default[l](e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(874),r=n(o),a=i(871),l="enum";t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,a.isEmptyValue)(t,"string")&&!e.required)return i();r.default.required(e,t,n,o,s),(0,a.isEmptyValue)(t,"string")||r.default.pattern(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(874),r=n(o),a=i(871);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=e.type,l=[],u=e.required||!e.required&&n.hasOwnProperty(e.field);if(u){if((0,a.isEmptyValue)(t,o)&&!e.required)return i();r.default.required(e,t,n,l,s,o),(0,a.isEmptyValue)(t,o)||r.default.type(e,t,n,l,s)}i(l)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(874),r=n(o),a=i(871);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,a.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,o,s),(0,a.isEmptyValue)(t)||(r.default.type(e,t,n,o,s),t&&r.default.range(e,t.getTime(),n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(874),r=n(o),a=i(871);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var r=[],l=Array.isArray(t)?"array":"undefined"==typeof t?"undefined":o(t);a.default.required(e,t,n,r,s,l),i(r)}Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=i(874),a=n(r);t.default=s,e.exports=t.default},function(e,t){"use strict";function i(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}Object.defineProperty(t,"__esModule",{value:!0}),t.newMessages=i;t.messages=i()},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-form-item",class:{"el-form-item--feedback":e.elForm&&e.elForm.statusIcon,"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-success":"success"===e.validateState,"is-required":e.isRequired||e.required}},[e.label||e.$slots.label?i("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.prop}},[e._t("label",[e._v(e._s(e.label+e.form.labelSuffix))])],2):e._e(),i("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?i("div",{staticClass:"el-form-item__error",class:{"el-form-item__error--inline":"boolean"==typeof e.inlineMessage?e.inlineMessage:e.elForm&&e.elForm.inlineMessage||!1}},[e._v("\n "+e._s(e.validateMessage)+"\n ")]):e._e()])],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(897),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(898),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(899),o=n(s);t.default={name:"ElTabs",components:{TabNav:o.default},props:{type:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean,tabPosition:{type:String,default:"top"}},provide:function(){return{rootTabs:this}},data:function(){return{currentName:this.value||this.activeName,panes:[]}},watch:{activeName:function(e){this.setCurrentName(e)},value:function(e){this.setCurrentName(e)},currentName:function(e){var t=this;this.$refs.nav&&this.$nextTick(function(e){t.$refs.nav.scrollToActiveTab()})}},methods:{handleTabClick:function(e,t,i){e.disabled||(this.setCurrentName(t),this.$emit("tab-click",e,i))},handleTabRemove:function(e,t){e.disabled||(t.stopPropagation(),this.$emit("edit",e.name,"remove"),this.$emit("tab-remove",e.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(e){this.currentName=e,this.$emit("input",e)},addPanes:function(e){var t=this.$slots.default.filter(function(e){return 1===e.elm.nodeType&&/\bel-tab-pane\b/.test(e.elm.className)}).indexOf(e.$vnode);this.panes.splice(t,0,e)},removePanes:function(e){var t=this.panes,i=t.indexOf(e);i>-1&&t.splice(i,1)}},render:function(e){var t,i=this.type,n=this.handleTabClick,s=this.handleTabRemove,o=this.handleTabAdd,r=this.currentName,a=this.panes,l=this.editable,u=this.addable,c=this.tabPosition,d=l||u?e("span",{class:"el-tabs__new-tab",on:{click:o}},[e("i",{class:"el-icon-plus"},[])]):null,h={props:{currentName:r,onTabClick:n,onTabRemove:s,editable:l,type:i,panes:a},ref:"nav"},f=e("div",{class:"el-tabs__header"},[d,e("tab-nav",h,[])]),p=e("div",{class:"el-tabs__content"},[this.$slots.default]);return e("div",{class:(t={"el-tabs":!0,"el-tabs--card":"card"===i},t["el-tabs--"+c]=!0,t["el-tabs--border-card"]="border-card"===i,t)},["bottom"!==c?[f,p]:[p,f]])},created:function(){this.currentName||this.setCurrentName("0")}}},function(e,t,i){var n=i(13)(i(900),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}t.__esModule=!0;var o=i(901),r=n(o),a=i(692),l=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})};t.default={name:"TabNav",components:{TabBar:r.default},inject:["rootTabs"],props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:s},onTabRemove:{type:Function,default:s},type:String},data:function(){return{scrollable:!1,navOffset:0}},computed:{navStyle:function(){var e=["top","bottom"].indexOf(this.rootTabs.tabPosition)!==-1?"X":"Y";return{transform:"translate"+e+"(-"+this.navOffset+"px)"}},sizeName:function(){return["top","bottom"].indexOf(this.rootTabs.tabPosition)!==-1?"width":"height"}},methods:{scrollPrev:function(){var e=this.$refs.navScroll["offset"+l(this.sizeName)],t=this.navOffset;if(t){var i=t>e?t-e:0;this.navOffset=i}},scrollNext:function(){var e=this.$refs.nav["offset"+l(this.sizeName)],t=this.$refs.navScroll["offset"+l(this.sizeName)],i=this.navOffset;if(!(e-i<=t)){var n=e-i>2*t?i+t:e-t;this.navOffset=n}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active"),i=this.$refs.navScroll,n=t.getBoundingClientRect(),s=i.getBoundingClientRect(),o=e.getBoundingClientRect(),r=this.navOffset,a=r;n.lefts.right&&(a=r+n.right-s.right),o.right0&&(this.navOffset=0)}}},updated:function(){this.update()},render:function(e){var t=this.type,i=this.panes,n=this.editable,s=this.onTabClick,o=this.onTabRemove,r=this.navStyle,a=this.scrollable,l=this.scrollNext,u=this.scrollPrev,c=a?[e("span",{class:["el-tabs__nav-prev",a.prev?"":"is-disabled"],on:{click:u}},[e("i",{class:"el-icon-arrow-left"},[])]),e("span",{class:["el-tabs__nav-next",a.next?"":"is-disabled"],on:{click:l}},[e("i",{class:"el-icon-arrow-right"},[])])]:null,d=this._l(i,function(t,i){var r=t.name||t.index||i,a=t.isClosable||n;t.index=""+i;var l=a?e("span",{class:"el-icon-close",on:{click:function(e){o(t,e)}}},[]):null,u=t.$slots.label||t.label;return e("div",{class:{"el-tabs__item":!0,"is-active":t.active,"is-disabled":t.disabled,"is-closable":a},ref:"tabs",refInFor:!0,on:{click:function(e){s(t,r,e)}}},[u,l])});return e("div",{class:["el-tabs__nav-wrap",a?"is-scrollable":""]},[c,e("div",{class:["el-tabs__nav-scroll"],ref:"navScroll"},[e("div",{class:"el-tabs__nav",ref:"nav",style:r},[t?null:e("tab-bar",{attrs:{tabs:i}},[]),d])])])},mounted:function(){(0,a.addResizeListener)(this.$el,this.update)},beforeDestroy:function(){this.$el&&this.update&&(0,a.removeResizeListener)(this.$el,this.update)}}},function(e,t,i){var n=i(13)(i(902),i(903),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"TabBar",props:{tabs:Array},inject:["rootTabs"],computed:{barStyle:{cache:!1,get:function(){var e=this;if(!this.$parent.$refs.tabs)return{};var t={},i=0,n=0,s=["top","bottom"].indexOf(this.rootTabs.tabPosition)!==-1?"width":"height",o="width"===s?"x":"y",r=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})};this.tabs.every(function(t,o){var a=e.$parent.$refs.tabs[o];return!!a&&(t.active?(n=a["client"+r(s)],!1):(i+=a["client"+r(s)],!0))});var a="translate"+r(o)+"("+i+"px)";return t[s]=n+"px",t.transform=a,t.msTransform=a,t.webkitTransform=a,t}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-tabs__active-bar",style:e.barStyle})},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(905),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(906),i(907),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElTabPane",componentName:"ElTabPane",props:{label:String,labelContent:Function,name:String,closable:Boolean,disabled:Boolean},data:function(){return{index:null}},computed:{isClosable:function(){return this.closable||this.$parent.closable},active:function(){return this.$parent.currentName===(this.name||this.index)}},mounted:function(){this.$parent.addPanes(this)},destroyed:function(){this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el),this.$parent.removePanes(this)},watch:{label:function(){this.$parent.$forceUpdate()}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.active,expression:"active"}],staticClass:"el-tab-pane"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(909),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(910),i(917),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(911),o=n(s),r=i(15),a=i(666),l=n(a);t.default={name:"ElTree",mixins:[l.default],components:{ElTreeNode:i(914)},data:function(){return{store:null,root:null,currentNode:null}},props:{data:{type:Array},emptyText:{type:String,default:function(){return(0,r.t)("el.tree.emptyText")}},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},checkDescendants:{type:Boolean,default:!1},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,renderContent:Function,showCheckbox:{type:Boolean,default:!1},props:{default:function(){return{children:"children",label:"label",icon:"icon",disabled:"disabled"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:18}},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}}},watch:{defaultCheckedKeys:function(e){this.store.defaultCheckedKeys=e,this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},data:function(e){this.store.setData(e)}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e,t){var i=this.nodeKey;return i&&e?e.data[i]:t},getCheckedNodes:function(e){return this.store.getCheckedNodes(e)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},getCurrentNode:function(){var e=this.store.getCurrentNode();return e?e.data:null},getCurrentKey:function(){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in getCurrentKey");var e=this.getCurrentNode();return e?e[this.nodeKey]:null},setCheckedNodes:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedNodes(e,t)},setCheckedKeys:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedKeys");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,i){this.store.setChecked(e,t,i)},setCurrentNode:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentNode");this.store.setUserCurrentNode(e)},setCurrentKey:function(e){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCurrentKey");this.store.setCurrentNodeKey(e)},handleNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,i)},updateKeyChildren:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in updateKeyChild");this.store.updateChildren(e,t)}},created:function(){this.isTree=!0,this.store=new o.default({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,checkDescendants:this.checkDescendants,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=i(912),a=n(r),l=i(913),u=function(){function e(t){var i=this;s(this,e),this.currentNode=null,this.currentNodeKey=null;for(var n in t)t.hasOwnProperty(n)&&(this[n]=t[n]);if(this.nodesMap={},this.root=new a.default({data:this.data,store:this}),this.lazy&&this.load){var o=this.load;o(this.root,function(e){i.root.doCreateChildren(e),i._initDefaultCheckedNodes()})}else this._initDefaultCheckedNodes()}return e.prototype.filter=function(e){var t=this.filterNodeMethod,i=function i(n){var s=n.root?n.root.childNodes:n.childNodes;if(s.forEach(function(n){n.visible=t.call(n,e,n.data,n),i(n)}),!n.visible&&s.length){var o=!0;s.forEach(function(e){e.visible&&(o=!1)}),n.root?n.root.visible=o===!1:n.visible=o===!1}n.visible&&!n.isLeaf&&n.expand()};i(this)},e.prototype.setData=function(e){var t=e!==this.root.data;this.root.setData(e),t&&this._initDefaultCheckedNodes()},e.prototype.getNode=function(e){var t="object"!==("undefined"==typeof e?"undefined":o(e))?e:(0,l.getNodeKey)(this.key,e);return this.nodesMap[t]},e.prototype.insertBefore=function(e,t){var i=this.getNode(t);i.parent.insertBefore({data:e},i)},e.prototype.insertAfter=function(e,t){var i=this.getNode(t);i.parent.insertAfter({data:e},i)},e.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent.removeChild(t)},e.prototype.append=function(e,t){var i=t?this.getNode(t):this.root;i&&i.insertChild({data:e})},e.prototype._initDefaultCheckedNodes=function(){var e=this,t=this.defaultCheckedKeys||[],i=this.nodesMap;t.forEach(function(t){var n=i[t];n&&n.setChecked(!0,!e.checkStrictly)})},e.prototype._initDefaultCheckedNode=function(e){var t=this.defaultCheckedKeys||[];t.indexOf(e.key)!==-1&&e.setChecked(!0,!this.checkStrictly)},e.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},e.prototype.registerNode=function(e){var t=this.key;if(t&&e&&e.data){var i=e.key;void 0!==i&&(this.nodesMap[e.key]=e)}},e.prototype.deregisterNode=function(e){var t=this.key;if(t&&e&&e.data){for(var i=e.childNodes,n=0,s=i.length;n0&&void 0!==arguments[0]&&arguments[0],t=[],i=function i(n){var s=n.root?n.root.childNodes:n.childNodes;s.forEach(function(n){(!e&&n.checked||e&&n.isLeaf&&n.checked)&&t.push(n.data),i(n)})};return i(this),t},e.prototype.getCheckedKeys=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.key,i=this._getAllNodes(),n=[];return i.forEach(function(i){(!e||e&&i.isLeaf)&&i.checked&&n.push((i.data||{})[t])}),n},e.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var i in t)t.hasOwnProperty(i)&&e.push(t[i]);return e},e.prototype.updateChildren=function(e,t){var i=this.nodesMap[e];if(i){for(var n=i.childNodes,s=0,o=n.length;s1&&void 0!==arguments[1]&&arguments[1],i=arguments[2],n=this._getAllNodes().sort(function(e,t){return t.level-e.level}),s=Object.create(null),o=Object.keys(i);n.forEach(function(e){return e.setChecked(!1,!1)});for(var r=0,a=n.length;r-1;if(c){for(var d=l.parent;d&&d.level>0;)s[d.data[e]]=!0,d=d.parent;l.isLeaf||this.checkStrictly?l.setChecked(!0,!1):(l.setChecked(!0,!0),t&&!function(){l.setChecked(!1,!1);var e=function e(t){var i=t.childNodes;i.forEach(function(t){t.isLeaf||t.setChecked(!1,!1),e(t)})};e(l)}())}else l.checked&&!s[u]&&l.setChecked(!1,!1)}},e.prototype.setCheckedNodes=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=this.key,n={};e.forEach(function(e){n[(e||{})[i]]=!0}),this._setCheckedKeys(i,t,n)},e.prototype.setCheckedKeys=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var i=this.key,n={};e.forEach(function(e){n[e]=!0}),this._setCheckedKeys(i,t,n)},e.prototype.setDefaultExpandedKeys=function(e){var t=this;e=e||[],this.defaultExpandedKeys=e,e.forEach(function(e){var i=t.getNode(e);i&&i.expand(null,t.autoExpandParent)})},e.prototype.setChecked=function(e,t,i){var n=this.getNode(e);n&&n.setChecked(!!t,i)},e.prototype.getCurrentNode=function(){return this.currentNode},e.prototype.setCurrentNode=function(e){this.currentNode=e},e.prototype.setUserCurrentNode=function(e){var t=e[this.key],i=this.nodesMap[t];this.setCurrentNode(i)},e.prototype.setCurrentNodeKey=function(e){var t=this.getNode(e);t&&(this.currentNode=t)},e}();t.default=u},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0,t.getChildState=void 0;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=function(){function e(e,t){for(var i=0;i0&&n.lazy&&n.defaultExpandAll&&this.expand(),this.data){var a=n.defaultExpandedKeys,l=n.key;l&&a&&a.indexOf(this.key)!==-1&&this.expand(null,n.autoExpandParent),l&&void 0!==n.currentNodeKey&&this.key===n.currentNodeKey&&(n.currentNode=this),n.lazy&&n._initDefaultCheckedNode(this),this.updateLeafState()}}return e.prototype.setData=function(e){Array.isArray(e)||(0,u.markNodeData)(this,e),this.data=e,this.childNodes=[];var t=void 0;t=0===this.level&&this.data instanceof Array?this.data:h(this,"children")||[];for(var i=0,n=t.length;i-1&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(t,1)),this.updateLeafState()},e.prototype.removeChildByData=function(e){var t=null;this.childNodes.forEach(function(i){i.data===e&&(t=i)}),t&&this.removeChild(t)},e.prototype.expand=function(e,t){var i=this,n=function(){if(t)for(var n=i.parent;n.level>0;)n.expanded=!0,n=n.parent;i.expanded=!0,e&&e()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&(i.checked?i.setChecked(!0,!0):d(i),n())}):n()},e.prototype.doCreateChildren=function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild((0,l.default)({data:e},i))})},e.prototype.collapse=function(){this.expanded=!1},e.prototype.shouldLoadData=function(){return this.store.lazy===!0&&this.store.load&&!this.loaded},e.prototype.updateLeafState=function(){if(this.store.lazy===!0&&this.loaded!==!0&&"undefined"!=typeof this.isLeafByUser)return void(this.isLeaf=this.isLeafByUser);var e=this.childNodes;return!this.store.lazy||this.store.lazy===!0&&this.loaded===!0?void(this.isLeaf=!e||0===e.length):void(this.isLeaf=!1)},e.prototype.setChecked=function(e,t,i,n){var s=this;if(this.indeterminate="half"===e,this.checked=e===!0,!this.store.checkStrictly){if(!this.shouldLoadData()||this.store.checkDescendants){var r=function(){var i=c(s.childNodes),o=i.all,r=i.allWithoutDisable;s.isLeaf||o||!r||(s.checked=!1,e=!1);var a=function(){if(t){for(var i=s.childNodes,o=0,r=i.length;o1&&void 0!==arguments[1]?arguments[1]:{};if(this.store.lazy!==!0||!this.store.load||this.loaded||this.loading&&!Object.keys(i).length)e&&e.call(this);else{this.loading=!0;var n=function(n){t.loaded=!0,t.loading=!1,t.childNodes=[],t.doCreateChildren(n,i),t.updateLeafState(),e&&e.call(t,n)};this.store.load(this,n)}},r(e,[{key:"label",get:function(){return h(this,"label")}},{key:"icon",get:function(){return h(this,"icon")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}},{key:"disabled",get:function(){return h(this,"disabled")}}]),e}();t.default=p},function(e,t){"use strict";t.__esModule=!0;var i=t.NODE_KEY="$treeNodeId";t.markNodeData=function(e,t){t[i]||Object.defineProperty(t,i,{value:e.id,enumerable:!1,configurable:!1,writable:!1})},t.getNodeKey=function(e,t){return e?t[e]:t[i]}},function(e,t,i){var n=i(13)(i(915),i(916),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(742),o=n(s),r=i(769),a=n(r),l=i(666),u=n(l);t.default={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[u.default],props:{node:{default:function(){return{}}},props:{},renderContent:Function},components:{ElCollapseTransition:o.default,ElCheckbox:a.default,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,i=this.node,n=i.data,s=i.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:t.tree.$vnode.context,node:i,data:n,store:s}):e("span",{class:"el-tree-node__label"},[this.node.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!1,showCheckbox:!1,oldChecked:null,oldIndeterminate:null}},watch:{"node.indeterminate":function(e){this.handleSelectChange(this.node.checked,e)},"node.checked":function(e){this.handleSelectChange(e,this.node.indeterminate)},"node.expanded":function(e){var t=this;this.$nextTick(function(){return t.expanded=e}),e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e,t){var i=this.tree.nodeKey;return i&&e?e.data[i]:t},handleSelectChange:function(e,t){this.oldChecked!==e&&this.oldIndeterminate!==t&&this.tree.$emit("check-change",this.node.data,e,t),this.oldChecked=e,this.indeterminate=t},handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node),this.tree.$emit("current-change",e.currentNode?e.currentNode.data:null,e.currentNode),this.tree.currentNode=this,this.tree.expandOnClickNode&&this.handleExpandIconClick(),this.tree.$emit("node-click",this.node.data,this.node,this)},handleExpandIconClick:function(){this.node.isLeaf||(this.expanded?(this.tree.$emit("node-collapse",this.node.data,this.node,this),this.node.collapse()):(this.node.expand(),this.$emit("node-expand",this.node.data,this.node,this)))},handleCheckChange:function(e,t){this.node.setChecked(t.target.checked,!this.tree.checkStrictly)},handleChildNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,i)}},created:function(){var e=this,t=this.$parent;t.isTree?this.tree=t:this.tree=t.tree;var i=this.tree;i||console.warn("Can not find node's tree.");var n=i.props||{},s=n.children||"children";this.$watch("node.data."+s,function(){e.node.updateChildren()}),this.showCheckbox=i.showCheckbox,this.node.expanded&&(this.expanded=!0,this.childNodeRendered=!0),this.tree.accordion&&this.$on("tree-node-expand",function(t){e.node!==t&&e.node.collapse()})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.node.visible,expression:"node.visible"}],staticClass:"el-tree-node",class:{"is-expanded":e.expanded,"is-current":e.tree.store.currentNode===e.node,"is-hidden":!e.node.visible},on:{click:function(t){t.stopPropagation(),e.handleClick(t)}}},[i("div",{staticClass:"el-tree-node__content",style:{"padding-left":(e.node.level-1)*e.tree.indent+"px"}},[i("span",{staticClass:"el-tree-node__expand-icon",class:{"is-leaf":e.node.isLeaf,expanded:!e.node.isLeaf&&e.expanded},on:{click:function(t){t.stopPropagation(),e.handleExpandIconClick(t)}}}),e.showCheckbox?i("el-checkbox",{attrs:{indeterminate:e.node.indeterminate,disabled:!!e.node.disabled},on:{change:e.handleCheckChange},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:e.node.checked,callback:function(t){e.node.checked=t},expression:"node.checked"}}):e._e(),e.node.loading?i("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):e._e(),i("node-content",{attrs:{node:e.node}})],1),i("el-collapse-transition",[e.childNodeRendered?i("div",{directives:[{name:"show",rawName:"v-show",value:e.expanded,expression:"expanded"}],staticClass:"el-tree-node__children"},e._l(e.node.childNodes,function(t){return i("el-tree-node",{key:e.getNodeKey(t),attrs:{"render-content":e.renderContent,node:t},on:{"node-expand":e.handleChildNodeExpand}})})):e._e()])],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":e.highlightCurrent}},[e._l(e.root.childNodes,function(t){return i("el-tree-node",{key:e.getNodeKey(t),attrs:{node:t,props:e.props,"render-content":e.renderContent},on:{"node-expand":e.handleNodeExpand}})}),e.root.childNodes&&0!==e.root.childNodes.length?e._e():i("div",{staticClass:"el-tree__empty-block"},[i("span",{staticClass:"el-tree__empty-text"},[e._v(e._s(e.emptyText))])])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(919),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(920),i(921),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i={success:"el-icon-success",warning:"el-icon-warning",error:"el-icon-error"};t.default={name:"ElAlert",props:{title:{type:String,default:"",required:!0},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:Boolean,center:Boolean},data:function(){return{visible:!0}},methods:{close:function(){this.visible=!1,this.$emit("close")}},computed:{typeClass:function(){return"el-alert--"+this.type},iconClass:function(){return i[this.type]||"el-icon-info"},isBigIcon:function(){return this.description||this.$slots.default?"is-big":""},isBoldTitle:function(){return this.description||this.$slots.default?"is-bold":""}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-alert-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-alert",class:[e.typeClass,e.center?"is-center":""],attrs:{role:"alert"}},[e.showIcon?i("i",{staticClass:"el-alert__icon",class:[e.iconClass,e.isBigIcon]}):e._e(),i("div",{staticClass:"el-alert__content"},[e.title?i("span",{staticClass:"el-alert__title",class:[e.isBoldTitle]},[e._v(e._s(e.title))]):e._e(),e._t("default",[e.description?i("p",{staticClass:"el-alert__description"},[e._v(e._s(e.description))]):e._e()]),i("i",{directives:[{name:"show",rawName:"v-show",value:e.closable,expression:"closable"}],staticClass:"el-alert__closebtn",class:{"is-customed":""!==e.closeText,"el-icon-close":""===e.closeText},on:{click:function(t){e.close()}}},[e._v(e._s(e.closeText))])],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(923),o=n(s);t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),r=i(678),a=i(798),l=o.default.extend(i(924)),u=void 0,c=[],d=1,h=function e(t){if(!o.default.prototype.$isServer){t=t||{};var i=t.onClose,n="notification_"+d++,s=t.position||"top-right";t.onClose=function(){e.close(n,i)},u=new l({data:t}),(0,a.isVNode)(t.message)&&(u.$slots.default=[t.message],t.message=""),u.id=n,u.vm=u.$mount(),document.body.appendChild(u.vm.$el),u.vm.visible=!0,u.dom=u.vm.$el,u.dom.style.zIndex=r.PopupManager.nextZIndex();var h=t.offset||0;return c.filter(function(e){return e.position===s}).forEach(function(e){h+=e.$el.offsetHeight+16}),h+=16,u.verticalOffset=h,c.push(u),u.vm}};["success","warning","info","error"].forEach(function(e){h[e]=function(t){return("string"==typeof t||(0,a.isVNode)(t))&&(t={message:t}),t.type=e,h(t)}}),h.close=function(e,t){var i=-1,n=c.length,s=c.filter(function(t,n){return t.id===e&&(i=n,!0)})[0];if(s&&("function"==typeof t&&t(s),c.splice(i,1),!(n<=1)))for(var o=s.position,r=s.dom.offsetHeight,a=i;a-1?"right":"left"},verticalProperty:function(){return/^top-/.test(this.position)?"top":"bottom"},positionStyle:function(){var e;return e={},e[this.verticalProperty]=this.verticalOffset+"px",e}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},click:function(){"function"==typeof this.onClick&&this.onClick()},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}},mounted:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-notification-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-notification",e.customClass,e.horizontalClass],style:e.positionStyle,on:{mouseenter:function(t){e.clearTimer()},mouseleave:function(t){e.startTimer()},click:e.click}},[e.type||e.iconClass?i("i",{staticClass:"el-notification__icon",class:[e.typeClass,e.iconClass]}):e._e(),i("div",{staticClass:"el-notification__group",class:{"is-with-icon":e.typeClass||e.iconClass}},[i("h2",{staticClass:"el-notification__title",domProps:{textContent:e._s(e.title)}}),i("div",{staticClass:"el-notification__content"},[e._t("default",[e.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:e._s(e.message)}}):i("p",[e._v(e._s(e.message))])])],2),e.showClose?i("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(t){t.stopPropagation(),e.close(t)}}}):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(928),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(929),i(933),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(753),o=n(s),r=i(930),a=n(r),l=i(666),u=n(l);t.default={name:"ElSlider",mixins:[u.default],props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},height:{type:String},debounce:{type:Number,default:300},label:{type:String}},components:{ElInputNumber:o.default,SliderButton:a.default},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1,sliderSize:1}},watch:{value:function(e,t){this.dragging||Array.isArray(e)&&Array.isArray(t)&&e.every(function(e,i){return e===t[i]})||this.setValues()},dragging:function(e){e||this.setValues()},firstValue:function(e){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",e)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var e=this;return this.range?![this.minValue,this.maxValue].every(function(t,i){return t===e.oldValue[i]}):this.value!==this.oldValue},setValues:function(){var e=this.value;this.range&&Array.isArray(e)?e[1]this.max?this.$emit("input",[this.max,this.max]):e[0]this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(ethis.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",e),this.oldValue=e)))},setPosition:function(e){var t=this.min+e*(this.max-this.min)/100;if(!this.range)return void this.$refs.button1.setPosition(e);var i=void 0;i=Math.abs(this.minValue-t)this.secondValue?"button1":"button2",this.$refs[i].setPosition(e)},onSliderClick:function(e){if(!this.disabled&&!this.dragging){if(this.resetSize(),this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.sliderSize*100)}else{var i=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-i)/this.sliderSize*100)}this.emitChange()}},resetSize:function(){this.$refs.slider&&(this.sliderSize=this.$refs.slider["client"+(this.vertical?"Height":"Width")])},emitChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.range?[e.minValue,e.maxValue]:e.value)})}},computed:{stops:function(){var e=this;if(0===this.step)return[];for(var t=(this.max-this.min)/this.step,i=100*this.step/(this.max-this.min),n=[],s=1;s100*(e.maxValue-e.min)/(e.max-e.min)}):n.filter(function(t){return t>100*(e.firstValue-e.min)/(e.max-e.min)})},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barSize:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barStart:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var e=[this.min,this.max,this.step].map(function(e){var t=(""+e).split(".")[1];return t?t.length:0});return Math.max.apply(null,e)},runwayStyle:function(){return this.vertical?{height:this.height}:{}},barStyle:function(){return this.vertical?{height:this.barSize,bottom:this.barStart}:{width:this.barSize,left:this.barStart}}},mounted:function(){var e=void 0;this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue],e=this.firstValue+"-"+this.secondValue):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue,e=this.firstValue),this.$el.setAttribute("aria-valuetext",e),this.$el.setAttribute("aria-label",this.label?this.label:"slider between "+this.min+" and "+this.max),this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}}},function(e,t,i){var n=i(13)(i(931),i(932),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(796),o=n(s);t.default={name:"ElSliderButton",components:{ElTooltip:o.default},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1}},data:function(){return{hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.disabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value},wrapperStyle:function(){return this.vertical?{bottom:this.currentPosition}:{left:this.currentPosition}}},watch:{dragging:function(e){this.$parent.dragging=e}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(e){this.disabled||(e.preventDefault(),this.onDragStart(e),window.addEventListener("mousemove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onLeftKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)-this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onRightKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)+this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onDragStart:function(e){this.dragging=!0,this.isClick=!0,this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;this.vertical?(this.currentY=e.clientY,t=(this.startY-this.currentY)/this.$parent.sliderSize*100):(this.currentX=e.clientX,t=(this.currentX-this.startX)/this.$parent.sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},onDragEnd:function(){var e=this;this.dragging&&(setTimeout(function(){e.dragging=!1,e.hideTooltip(),e.isClick||(e.setPosition(e.newPosition),e.$parent.emitChange())},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){var t=this;if(null!==e){e<0?e=0:e>100&&(e=100);var i=100/((this.max-this.min)/this.step),n=Math.round(e/i),s=n*i*(this.max-this.min)*.01+this.min;s=parseFloat(s.toFixed(this.precision)),this.$emit("input",s),this.$nextTick(function(){t.$refs.tooltip&&t.$refs.tooltip.updatePopper()}),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:e.hovering,dragging:e.dragging},style:e.wrapperStyle,attrs:{tabindex:"0"},on:{mouseenter:e.handleMouseEnter,mouseleave:e.handleMouseLeave,mousedown:e.onButtonDown,focus:e.handleMouseEnter,blur:e.handleMouseLeave,keydown:[function(t){return"button"in t||!e._k(t.keyCode,"left",37)?"button"in t&&0!==t.button?null:void e.onLeftKeyDown(t):null},function(t){return"button"in t||!e._k(t.keyCode,"right",39)?"button"in t&&2!==t.button?null:void e.onRightKeyDown(t):null},function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.onLeftKeyDown(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.onRightKeyDown(t)):null}]}},[i("el-tooltip",{ref:"tooltip",attrs:{placement:"top",disabled:!e.showTooltip}},[i("span",{slot:"content"},[e._v(e._s(e.formatValue))]),i("div",{staticClass:"el-slider__button",class:{hover:e.hovering,dragging:e.dragging}})])],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-slider",class:{"is-vertical":e.vertical,"el-slider--with-input":e.showInput},attrs:{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-orientation":e.vertical?"vertical":"horizontal","aria-disabled":e.disabled}},[e.showInput&&!e.range?i("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:e.step,disabled:e.disabled,controls:e.showInputControls,min:e.min,max:e.max,debounce:e.debounce,size:"small"},on:{change:function(t){e.$nextTick(e.emitChange)}},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}):e._e(),i("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":e.showInput,disabled:e.disabled},style:e.runwayStyle,on:{click:e.onSliderClick}},[i("div",{staticClass:"el-slider__bar",style:e.barStyle}),i("slider-button",{ref:"button1",attrs:{vertical:e.vertical},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}),e.range?i("slider-button",{ref:"button2",attrs:{vertical:e.vertical},model:{value:e.secondValue,callback:function(t){e.secondValue=t},expression:"secondValue"}}):e._e(),e._l(e.stops,function(t){return e.showStops?i("div",{staticClass:"el-slider__stop",style:e.vertical?{bottom:t+"%"}:{left:t+"%"}}):e._e()})],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(935),o=n(s),r=i(939),a=n(r);t.default={install:function(e){e.use(o.default),e.prototype.$loading=a.default},directive:o.default,service:a.default}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var s=i(2),o=n(s),r=i(292),a=o.default.extend(i(936));t.install=function(e){if(!e.prototype.$isServer){var t=function(t,n){n.value?e.nextTick(function(){n.modifiers.fullscreen?(t.originalPosition=(0,r.getStyle)(document.body,"position"),t.originalOverflow=(0,r.getStyle)(document.body,"overflow"),(0,r.addClass)(t.mask,"is-fullscreen"),i(document.body,t,n)):((0,r.removeClass)(t.mask,"is-fullscreen"),n.modifiers.body?(t.originalPosition=(0,r.getStyle)(document.body,"position"),["top","left"].forEach(function(e){var i="top"===e?"scrollTop":"scrollLeft";t.maskStyle[e]=t.getBoundingClientRect()[e]+document.body[i]+document.documentElement[i]+"px"}),["height","width"].forEach(function(e){t.maskStyle[e]=t.getBoundingClientRect()[e]+"px"}),i(document.body,t,n)):(t.originalPosition=(0,r.getStyle)(t,"position"),i(t,t,n)))}):t.domVisible&&(t.instance.$on("after-leave",function(e){t.domVisible=!1,n.modifiers.fullscreen&&"hidden"!==t.originalOverflow&&(document.body.style.overflow=t.originalOverflow),n.modifiers.fullscreen||n.modifiers.body?document.body.style.position=t.originalPosition:t.style.position=t.originalPosition}),t.instance.visible=!1)},i=function(t,i,n){i.domVisible||"none"===(0,r.getStyle)(i,"display")||"hidden"===(0,r.getStyle)(i,"visibility")||(Object.keys(i.maskStyle).forEach(function(e){i.mask.style[e]=i.maskStyle[e]}),"absolute"!==i.originalPosition&&"fixed"!==i.originalPosition&&(t.style.position="relative"),n.modifiers.fullscreen&&n.modifiers.lock&&(t.style.overflow="hidden"),i.domVisible=!0,t.appendChild(i.mask),e.nextTick(function(){i.instance.visible=!0}),i.domInserted=!0)};e.directive("loading",{bind:function(e,i){var n=new a({el:document.createElement("div"),data:{text:e.getAttribute("element-loading-text"),fullscreen:!!i.modifiers.fullscreen}});e.instance=n,e.mask=n.$el,e.maskStyle={},t(e,i)},update:function(e,i){e.instance.setText(e.getAttribute("element-loading-text")),i.oldValue!==i.value&&t(e,i)},unbind:function(e,t){e.domInserted&&(t.modifiers.fullscreen||t.modifiers.body?document.body.removeChild(e.mask):e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask))}})}}},function(e,t,i){var n=i(13)(i(937),i(938),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={data:function(){return{text:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}]},[i("div",{staticClass:"el-loading-spinner"},[i("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?i("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),r=i(936),a=n(r),l=i(292),u=i(673),c=n(u),d=o.default.extend(a.default),h={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},f=void 0;d.prototype.originalPosition="",d.prototype.originalOverflow="",d.prototype.close=function(){var e=this;this.fullscreen&&(f=void 0),this.$on("after-leave",function(t){e.fullscreen&&"hidden"!==e.originalOverflow&&(document.body.style.overflow=e.originalOverflow),e.fullscreen||e.body?document.body.style.position=e.originalPosition:e.target.style.position=e.originalPosition,e.$el&&e.$el.parentNode&&e.$el.parentNode.removeChild(e.$el),e.$destroy()}),this.visible=!1};var p=function(e,t,i){var n={};e.fullscreen?(i.originalPosition=(0,l.getStyle)(document.body,"position"),i.originalOverflow=(0,l.getStyle)(document.body,"overflow")):e.body?(i.originalPosition=(0,l.getStyle)(document.body,"position"),["top","left"].forEach(function(t){var i="top"===t?"scrollTop":"scrollLeft";n[t]=e.target.getBoundingClientRect()[t]+document.body[i]+document.documentElement[i]+"px"}),["height","width"].forEach(function(t){n[t]=e.target.getBoundingClientRect()[t]+"px"; -})):i.originalPosition=(0,l.getStyle)(t,"position"),Object.keys(n).forEach(function(e){i.$el.style[e]=n[e]})},m=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!o.default.prototype.$isServer){if(e=(0,c.default)({},h,e),"string"==typeof e.target&&(e.target=document.querySelector(e.target)),e.target=e.target||document.body,e.target!==document.body?e.fullscreen=!1:e.body=!0,e.fullscreen&&f)return f;var t=e.body?document.body:e.target,i=new d({el:document.createElement("div"),data:e});return p(e,t,i),"absolute"!==i.originalPosition&&"fixed"!==i.originalPosition&&(t.style.position="relative"),e.fullscreen&&e.lock&&(t.style.overflow="hidden"),t.appendChild(i.$el),o.default.nextTick(function(){i.visible=!0}),e.fullscreen&&(f=i),i}};t.default=m},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(941),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(942),i(943),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElIcon",props:{name:String}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("i",{class:"el-icon-"+e.name})},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(945),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElRow",componentName:"ElRow",props:{tag:{type:String,default:"div"},gutter:Number,type:String,justify:{type:String,default:"start"},align:{type:String,default:"top"}},computed:{style:function(){var e={};return this.gutter&&(e.marginLeft="-"+this.gutter/2+"px",e.marginRight=e.marginLeft),e}},render:function(e){return e(this.tag,{class:["el-row","start"!==this.justify?"is-justify-"+this.justify:"","top"!==this.align?"is-align-"+this.align:"",{"el-row--flex":"flex"===this.type}],style:this.style},this.$slots.default)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(947),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t){"use strict";t.__esModule=!0;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default={name:"ElCol",props:{span:{type:Number,default:24},tag:{type:String,default:"div"},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object]},computed:{gutter:function(){for(var e=this.$parent;e&&"ElRow"!==e.$options.componentName;)e=e.$parent;return e?e.gutter:0}},render:function(e){var t=this,n=[],s={};return this.gutter&&(s.paddingLeft=this.gutter/2+"px",s.paddingRight=s.paddingLeft),["span","offset","pull","push"].forEach(function(e){t[e]&&n.push("span"!==e?"el-col-"+e+"-"+t[e]:"el-col-"+t[e])}),["xs","sm","md","lg"].forEach(function(e){"number"==typeof t[e]?n.push("el-col-"+e+"-"+t[e]):"object"===i(t[e])&&!function(){var i=t[e];Object.keys(i).forEach(function(t){n.push("span"!==t?"el-col-"+e+"-"+t+"-"+i[t]:"el-col-"+e+"-"+i[t])})}()}),e(this.tag,{class:["el-col",n],style:s},this.$slots.default)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(949),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(950),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}t.__esModule=!0;var o=i(951),r=n(o),a=i(958),l=n(a),u=i(965),c=n(u),d=i(953),h=n(d),f=i(967),p=n(f);t.default={name:"ElUpload",mixins:[p.default],components:{ElProgress:h.default,UploadList:r.default,Upload:l.default,IframeUpload:c.default},provide:{uploader:void 0},props:{action:{type:String,required:!0},headers:{type:Object,default:function(){return{}}},data:Object,multiple:Boolean,name:{type:String,default:"file"},drag:Boolean,dragger:Boolean,withCredentials:Boolean,showFileList:{type:Boolean,default:!0},accept:String,type:{type:String,default:"select"},beforeUpload:Function,onRemove:{type:Function,default:s},onChange:{type:Function,default:s},onPreview:{type:Function},onSuccess:{type:Function,default:s},onProgress:{type:Function,default:s},onError:{type:Function,default:s},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},watch:{fileList:{immediate:!0,handler:function(e){var t=this;this.uploadFiles=e.map(function(e){return e.uid=e.uid||Date.now()+t.tempIndex++,e.status="success",e})}}},methods:{handleStart:function(e){e.uid=Date.now()+this.tempIndex++;var t={status:"ready",name:e.name,size:e.size,percentage:0,uid:e.uid,raw:e};try{t.url=URL.createObjectURL(e)}catch(e){return void console.error(e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var i=this.getFile(t);this.onProgress(e,i,this.uploadFiles),i.status="uploading",i.percentage=e.percent||0},handleSuccess:function(e,t){var i=this.getFile(t);i&&(i.status="success",i.response=e,this.onSuccess(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles))},handleError:function(e,t){var i=this.getFile(t),n=this.uploadFiles;i.status="fail",n.splice(n.indexOf(i),1),this.onError(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles)},handleRemove:function(e,t){t&&(e=this.getFile(t)),this.abort(e);var i=this.uploadFiles;i.splice(i.indexOf(e),1),this.onRemove(e,i)},getFile:function(e){var t=this.uploadFiles,i=void 0;return t.every(function(t){return i=e.uid===t.uid?t:null,!i}),i},abort:function(e){this.$refs["upload-inner"].abort(e)},clearFiles:function(){this.uploadFiles=[]},submit:function(){var e=this;this.uploadFiles.filter(function(e){return"ready"===e.status}).forEach(function(t){e.$refs["upload-inner"].upload(t.raw)})},getMigratingConfig:function(){return{props:{"default-file-list":"default-file-list is renamed to file-list.","show-upload-list":"show-upload-list is renamed to show-file-list.","thumbnail-mode":"thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan"}}}},render:function(e){var t=void 0;this.showFileList&&(t=e(r.default,{attrs:{disabled:this.disabled,listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}},[]));var i={props:{type:this.type,drag:this.drag,action:this.action,multiple:this.multiple,"before-upload":this.beforeUpload,"with-credentials":this.withCredentials,headers:this.headers,name:this.name,data:this.data,accept:this.accept,fileList:this.uploadFiles,autoUpload:this.autoUpload,listType:this.listType,disabled:this.disabled,"on-start":this.handleStart,"on-progress":this.handleProgress,"on-success":this.handleSuccess,"on-error":this.handleError,"on-preview":this.onPreview,"on-remove":this.handleRemove,"http-request":this.httpRequest},ref:"upload-inner"},n=this.$slots.trigger||this.$slots.default,s="undefined"!=typeof FormData||this.$isServer?e("upload",i,[n]):e("iframeUpload",i,[n]);return e("div",null,["picture-card"===this.listType?t:"",this.$slots.trigger?[s,this.$slots.default]:s,this.$slots.tip,"picture-card"!==this.listType?t:""])}}},function(e,t,i){var n=i(13)(i(952),i(957),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(668),o=n(s),r=i(953),a=n(r);t.default={mixins:[o.default],data:function(){return{focusing:!1}},components:{ElProgress:a.default},props:{files:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(954),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(955),i(956),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElProgress",props:{type:{type:String,default:"line",validator:function(e){return["line","circle"].indexOf(e)>-1}},percentage:{type:Number,default:0,required:!0,validator:function(e){return e>=0&&e<=100}},status:{type:String},strokeWidth:{type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var e=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10);return"M 50 50 m 0 -"+e+" a "+e+" "+e+" 0 1 1 0 "+2*e+" a "+e+" "+e+" 0 1 1 0 -"+2*e},perimeter:function(){var e=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*e},circlePathStyle:function(){var e=this.perimeter;return{strokeDasharray:e+"px,"+e+"px",strokeDashoffset:(1-this.percentage/100)*e+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var e;switch(this.status){case"success":e="#13ce66";break;case"exception":e="#ff4949";break;default:e="#20a0ff"}return e},iconClass:function(){return"line"===this.type?"success"===this.status?"el-icon-circle-check":"el-icon-circle-cross":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-progress",class:["el-progress--"+e.type,e.status?"is-"+e.status:"",{"el-progress--without-text":!e.showText,"el-progress--text-inside":e.textInside}],attrs:{role:"progressbar","aria-valuenow":e.percentage,"aria-valuemin":"0","aria-valuemax":"100"}},["line"===e.type?i("div",{staticClass:"el-progress-bar"},[i("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[i("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?i("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):i("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[i("svg",{attrs:{viewBox:"0 0 100 100"}},[i("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),i("path",{staticClass:"el-progress-circle__path",style:e.circlePathStyle,attrs:{d:e.trackPath,"stroke-linecap":"round",stroke:e.stroke,"stroke-width":e.relativeStrokeWidth,fill:"none"}})])]),e.showText&&!e.textInside?i("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?i("i",{class:e.iconClass}):[e._v(e._s(e.percentage)+"%")]],2):e._e()])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition-group",{class:["el-upload-list","el-upload-list--"+e.listType,{"is-disabled":e.disabled}],attrs:{tag:"ul",name:"el-list"}},e._l(e.files,function(t,n){return i("li",{key:n,class:["el-upload-list__item","is-"+t.status,e.focusing?"focusing":""],attrs:{tabindex:"0"},on:{keydown:function(i){return"button"in i||!e._k(i.keyCode,"delete",[8,46])?void e.$emit("remove",t):null},focus:function(t){e.focusing=!0},blur:function(t){e.focusing=!1},click:function(t){e.focusing=!1}}},["uploading"!==t.status&&["picture-card","picture"].indexOf(e.listType)>-1?i("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):e._e(),i("a",{staticClass:"el-upload-list__item-name",on:{click:function(i){e.handleClick(t)}}},[i("i",{staticClass:"el-icon-document"}),e._v(e._s(t.name)+"\n ")]),i("label",{staticClass:"el-upload-list__item-status-label"},[i("i",{class:{"el-icon-upload-success":!0,"el-icon-circle-check":"text"===e.listType,"el-icon-check":["picture-card","picture"].indexOf(e.listType)>-1}})]),e.disabled?e._e():i("i",{staticClass:"el-icon-close",on:{click:function(i){e.$emit("remove",t)}}}),e.disabled?e._e():i("i",{staticClass:"el-icon-close-tip"},[e._v("按delete键可删除")]),"uploading"===t.status?i("el-progress",{attrs:{type:"picture-card"===e.listType?"circle":"line","stroke-width":"picture-card"===e.listType?6:2,percentage:e.parsePercentage(t.percentage)}}):e._e(),"picture-card"===e.listType?i("span",{staticClass:"el-upload-list__item-actions"},[e.handlePreview&&"picture-card"===e.listType?i("span",{staticClass:"el-upload-list__item-preview",on:{click:function(i){e.handlePreview(t)}}},[i("i",{staticClass:"el-icon-view"})]):e._e(),e.disabled?e._e():i("span",{staticClass:"el-upload-list__item-delete",on:{click:function(i){e.$emit("remove",t)}}},[i("i",{staticClass:"el-icon-delete2"})])]):e._e()],1)}))},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(959),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(960),o=n(s),r=i(961),a=n(r),l=i(962),u=n(l);t.default={inject:["uploader"],components:{UploadDragger:u.default},props:{type:String,action:{type:String,required:!0},name:{type:String,default:"file"},data:Object,headers:Object,withCredentials:Boolean,multiple:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,drag:Boolean,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},fileList:Array,autoUpload:Boolean,listType:String,httpRequest:{type:Function,default:a.default},disabled:Boolean},data:function(){return{mouseover:!1,reqs:{}}},methods:{isImage:function(e){return e.indexOf("image")!==-1},handleChange:function(e){var t=e.target.files;t&&this.uploadFiles(t)},uploadFiles:function(e){var t=this,i=Array.prototype.slice.call(e);this.multiple||(i=i.slice(0,1)),0!==i.length&&i.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})},upload:function(e,t){var i=this;if(this.$refs.input.value=null,!this.beforeUpload)return this.post(e);var n=this.beforeUpload(e);n&&n.then?n.then(function(t){"[object File]"===Object.prototype.toString.call(t)?i.post(t):i.post(e)},function(){i.onRemove(null,e)}):n!==!1?this.post(e):this.onRemove(null,e)},abort:function(e){var t=this.reqs;if(e){var i=e;e.uid&&(i=e.uid),t[i]&&t[i].abort()}else Object.keys(t).forEach(function(e){t[e]&&t[e].abort(),delete t[e]})},post:function(e){var t=this,i=e.uid,n={headers:this.headers,withCredentials:this.withCredentials,file:e,data:this.data,filename:this.name,action:this.action,onProgress:function(i){t.onProgress(i,e)},onSuccess:function(n){t.onSuccess(n,e),delete t.reqs[i]},onError:function(n){t.onError(n,e),delete t.reqs[i]}},s=this.httpRequest(n);this.reqs[i]=s,s&&s.then&&s.then(n.onSuccess,n.onError)},handleClick:function(){this.disabled||(this.$refs.input.value=null,this.$refs.input.click())},handleKeydown:function(e){13!==e.keyCode&&32!==e.keyCode||this.handleClick()}},render:function(e){var t=this.handleClick,i=this.drag,n=this.name,s=this.handleChange,r=this.multiple,a=this.accept,l=this.listType,u=this.uploadFiles,c=this.disabled,d=this.handleKeydown,h={class:{"el-upload":!0},on:{click:t,keydown:d}};return h.class["el-upload--"+l]=!0,e("div",(0,o.default)([h,{attrs:{tabindex:"0"}}]),[i?e("upload-dragger",{attrs:{disabled:c},on:{file:u}},[this.$slots.default]):this.$slots.default,e("input",{class:"el-upload__input",attrs:{type:"file",name:n,multiple:r,accept:a},ref:"input",on:{change:s}},[])])}}},function(e,t){function i(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}}var n=/^(attrs|props|on|nativeOn|class|style|hook)$/;e.exports=function(e){return e.reduce(function(e,t){var s,o,r,a,l;for(r in t)if(s=e[r],o=t[r],s&&n.test(r))if("class"===r&&("string"==typeof s&&(l=s,e[r]=s={},s[l]=!0),"string"==typeof o&&(l=o,t[r]=o={},o[l]=!0)),"on"===r||"nativeOn"===r||"hook"===r)for(a in o)s[a]=i(s[a],o[a]);else if(Array.isArray(s))e[r]=s.concat(o);else if(Array.isArray(o))e[r]=[s].concat(o);else for(a in o)s[a]=o[a];else e[r]=t[r];return e},{})}},function(e,t){"use strict";function i(e,t,i){var n=void 0;n=i.response?i.status+" "+(i.response.error||i.response):i.responseText?i.status+" "+i.responseText:"fail to post "+e+" "+i.status;var s=new Error(n);return s.status=i.status,s.method="post",s.url=e,s}function n(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}function s(e){if("undefined"!=typeof XMLHttpRequest){var t=new XMLHttpRequest,s=e.action;t.upload&&(t.upload.onprogress=function(t){t.total>0&&(t.percent=t.loaded/t.total*100),e.onProgress(t)});var o=new FormData;e.data&&Object.keys(e.data).forEach(function(t){o.append(t,e.data[t])}),o.append(e.filename,e.file),t.onerror=function(t){e.onError(t)},t.onload=function(){return t.status<200||t.status>=300?e.onError(i(s,e,t)):void e.onSuccess(n(t))},t.open("post",s,!0),e.withCredentials&&"withCredentials"in t&&(t.withCredentials=!0);var r=e.headers||{};for(var a in r)r.hasOwnProperty(a)&&null!==r[a]&&t.setRequestHeader(a,r[a]);return t.send(o),t}}t.__esModule=!0,t.default=s},function(e,t,i){var n=i(13)(i(963),i(964),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElUploadDrag",props:{disabled:Boolean},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){this.disabled||(this.dragover=!1,this.$emit("file",e.dataTransfer.files))}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-upload-dragger",class:{"is-dragover":e.dragover},on:{drop:function(t){t.preventDefault(),e.onDrop(t)},dragover:function(t){t.preventDefault(),e.onDragover(t)},dragleave:function(t){t.preventDefault(),e.dragover=!1}}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(966),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(962),o=n(s);t.default={components:{UploadDragger:o.default},props:{type:String,data:{},action:{type:String,required:!0},name:{type:String,default:"file"},withCredentials:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},drag:Boolean,listType:String,disabled:Boolean},data:function(){return{mouseover:!1,domain:"",file:null,submitting:!1}},methods:{isImage:function(e){return e.indexOf("image")!==-1},handleClick:function(){this.disabled||this.$refs.input.click()},handleChange:function(e){var t=e.target.value;t&&this.uploadFiles(t)},uploadFiles:function(e){if(!this.submitting){this.submitting=!0,this.file=e,this.onStart(e);var t=this.getFormNode(),i=this.getFormDataNode(),n=this.data;"function"==typeof n&&(n=n(e));var s=[];for(var o in n)n.hasOwnProperty(o)&&s.push('');i.innerHTML=s.join(""),t.submit(),i.innerHTML=""}},getFormNode:function(){return this.$refs.form},getFormDataNode:function(){return this.$refs.data}},created:function(){this.frameName="frame-"+Date.now()},mounted:function(){var e=this;!this.$isServer&&window.addEventListener("message",function(t){if(e.file){var i=new URL(e.action).origin;if(t.origin===i){var n=t.data;"success"===n.result?e.onSuccess(n,e.file):"failed"===n.result&&e.onError(n,e.file),e.submitting=!1,e.file=null}}},!1)},render:function(e){var t=this.drag,i=this.uploadFiles,n=this.listType,s=this.frameName,o=this.disabled,r={"el-upload":!0};return r["el-upload--"+n]=!0,e("div",{class:r,on:{click:this.handleClick},nativeOn:{drop:this.onDrop,dragover:this.handleDragover,dragleave:this.handleDragleave}},[e("iframe",{on:{load:this.onload},ref:"iframe",attrs:{name:s}},[]),e("form",{ref:"form",attrs:{action:this.action,target:s,enctype:"multipart/form-data",method:"POST"}},[e("input",{class:"el-upload__input",attrs:{type:"file",name:"file",accept:this.accept},ref:"input",on:{change:this.handleChange}},[]),e("input",{attrs:{type:"hidden",name:"documentDomain",value:this.$isServer?"":document.domain}},[]),e("span",{ref:"data"},[])]),t?e("upload-dragger",{on:{file:i},attrs:{disabled:o}},[this.$slots.default]):this.$slots.default])}}},function(e,t,i){"use strict";t.__esModule=!0,t.default={mounted:function(){return},methods:{getMigratingConfig:function(){return{props:{},events:{}}}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(969),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(970),i(971),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{staticClass:"el-spinner"},[i("svg",{staticClass:"el-spinner-inner",style:{width:e.radius/2+"px",height:e.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:e.strokeColor,"stroke-width":e.strokeWidth}})])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(973),o=n(s);t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),r=i(678),a=i(798),l=o.default.extend(i(974)),u=void 0,c=[],d=1,h=function e(t){if(!o.default.prototype.$isServer){t=t||{},"string"==typeof t&&(t={message:t});var i=t.onClose,n="message_"+d++;return t.onClose=function(){e.close(n,i)},u=new l({data:t}),u.id=n,(0,a.isVNode)(u.message)&&(u.$slots.default=[u.message],u.message=null),u.vm=u.$mount(),document.body.appendChild(u.vm.$el),u.vm.visible=!0,u.dom=u.vm.$el,u.dom.style.zIndex=r.PopupManager.nextZIndex(),c.push(u),u.vm}};["success","warning","info","error"].forEach(function(e){h[e]=function(t){return"string"==typeof t&&(t={message:t}),t.type=e,h(t)}}),h.close=function(e,t){for(var i=0,n=c.length;i=0;e--)c[e].close()},t.default=h},function(e,t,i){var n=i(13)(i(975),i(976),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i={success:"success",info:"info",warning:"warning",error:"error"};t.default={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null,dangerouslyUseHTMLString:!1,center:!1}},computed:{iconWrapClass:function(){var e=["el-message__icon"];return this.type&&!this.iconClass&&e.push("el-message__icon--"+this.type),e},typeClass:function(){return this.type&&!this.iconClass?"el-message__icon el-icon-"+i[this.type]:""}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this)},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}},mounted:function(){this.startTimer()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-message-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-message",e.type&&!e.iconClass?"el-message--"+e.type:"",e.center?"is-center":"",e.customClass],on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?i("i",{class:e.iconClass}):i("i",{class:e.typeClass}),e._t("default",[e.dangerouslyUseHTMLString?i("p",{staticClass:"el-message__content",domProps:{innerHTML:e._s(e.message)}}):i("p",{staticClass:"el-message__content"},[e._v(e._s(e.message))])]),e.showClose?i("i",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(978),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(979),i(980),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.disabled&&this.valueDecimal>0&&e-1this.value,i=this.allowHalf&&this.pointerAtLeftHalf&&e-.5<=this.currentValue&&e>this.currentValue;return t||i},getIconStyle:function(e){var t=this.disabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.disabled||(this.allowHalf&&this.pointerAtLeftHalf?(this.$emit("input",this.currentValue),this.$emit("change",this.currentValue)):(this.$emit("input",e),this.$emit("change",e)),this.focusing=!1)},handelKey:function(e){var t=this.currentValue,i=e.keyCode;38===i||39===i?(t+=this.allowHalf?.5:1,e.stopPropagation(),e.preventDefault()):37!==i&&40!==i||(t-=this.allowHalf?.5:1,e.stopPropagation(),e.preventDefault()),t=t<0?0:t,t=t>this.max?this.max:t,this.$emit("input",t),this.$emit("change",t)},setCurrentValue:function(e,t){if(!this.disabled){if(this.allowHalf){var i=t.target;(0,n.hasClass)(i,"el-rate__item")&&(i=i.querySelector(".el-rate__icon")),(0,n.hasClass)(i,"el-rate__decimal")&&(i=i.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=i.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.disabled||(this.allowHalf&&(this.pointerAtLeftHalf=this.value!==Math.floor(this.value)),this.currentValue=this.value,this.hoverIndex=-1)}},created:function(){this.value||this.$emit("input",0),this.classMap={lowClass:this.iconClasses[0],mediumClass:this.iconClasses[1],highClass:this.iconClasses[2],voidClass:this.voidIconClass,disabledVoidClass:this.disabledVoidIconClass}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-rate",class:{focusing:e.focusing},attrs:{role:"slider","aria-valuenow":e.currentValue,"aria-valuetext":e.text,"aria-valuemin":"0","aria-valuemin":e.max,tabindex:"0"},on:{keydown:e.handelKey,focus:function(t){e.focusing=!0},blur:function(t){e.focusing=!1}}},[e._l(e.max,function(t){return i("span",{staticClass:"el-rate__item",style:{cursor:e.disabled?"auto":"pointer"},on:{mousemove:function(i){e.setCurrentValue(t,i)},mouseleave:e.resetCurrentValue,click:function(i){e.selectValue(t)}}},[i("i",{staticClass:"el-rate__icon",class:[e.classes[t-1],{hover:e.hoverIndex===t}],style:e.getIconStyle(t)},[e.showDecimalIcon(t)?i("i",{staticClass:"el-rate__decimal",class:e.decimalIconClass,style:e.decimalStyle}):e._e()])])}),e.showText||e.showScore?i("span",{ -staticClass:"el-rate__text",style:{color:e.textColor}},[e._v(e._s(e.text))]):e._e()],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(990),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(991),i(992),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElSteps",props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,center:Boolean,simple:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){var t=this;e.forEach(function(e,t){e.index=t}),this.center&&!function(){var i=e.length;t.$nextTick(function(){t.stepOffset=e[i-1].$el.getBoundingClientRect().width/(i-1)})}()}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-steps",class:[!e.simple&&"el-steps--"+e.direction,e.simple&&"el-steps--simple"]},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(994),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(995),i(996),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,lineStyle:{},internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},beforeDestroy:function(){var e=this.$parent.steps,t=e.indexOf(this);t>=0&&e.splice(t,1)},computed:{currentStatus:function(){return this.status||this.internalStatus},prevStatus:function(){var e=this.$parent.steps[this.index-1];return e?e.currentStatus:"wait"},isCenter:function(){return this.$parent.alignCenter},isVertical:function(){return"vertical"===this.$parent.direction},isSimple:function(){return this.$parent.simple},isLast:function(){var e=this.$parent;return e.steps[e.steps.length-1]===this},stepsCount:function(){return this.$parent.steps.length},space:function e(){var t=this.isSimple,e=this.$parent.space;return t?"":e},style:function(){var e=this.$parent,t=e.steps.length,i="number"==typeof this.space?this.space+"px":this.space?this.space:100/(t-1)+"%";return{flexBasis:i}}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index&&"error"!==this.prevStatus?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,i={};i.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?("error"!==this.currentStatus,t=0):"wait"===e&&(t=0,i.transitionDelay=-150*this.index+"ms"),i.borderWidth=t?"1px":0,"vertical"===this.$parent.direction?i.height=t+"%":i.width=t+"%",this.lineStyle=i}},mounted:function(){var e=this,t=this.$watch("index",function(i){e.$watch("$parent.active",e.updateStatus,{immediate:!0}),t()})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-step",class:[!e.isSimple&&"is-"+e.$parent.direction,e.isSimple&&"is-simple",e.isLast&&!e.space&&!e.isCenter&&"is-flex",e.isCenter&&!e.isVertical&&!e.isSimple&&"is-center"],style:[e.style,e.isLast?{maxWidth:100/e.stepsCount+"%"}:{marginRight:-e.$parent.stepOffset+"px"}]},[i("div",{staticClass:"el-step__head",class:"is-"+e.currentStatus},[i("div",{staticClass:"el-step__line",style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[i("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),i("div",{staticClass:"el-step__icon",class:"is-"+(e.icon?"icon":"text")},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?i("i",{staticClass:"el-step__icon-inner",class:[e.icon]}):e._e(),e.icon||e.isSimple?e._e():i("div",{staticClass:"el-step__icon-inner"},[e._v(e._s(e.index+1))])]):i("i",{staticClass:"el-step__icon-inner is-status",class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),i("div",{staticClass:"el-step__main"},[i("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),e.isSimple?i("div",{staticClass:"el-step__arrow"}):i("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(998),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(999),i(1e3),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(43),o=n(s),r=i(692);t.default={name:"ElCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},computed:{hasLabel:function(){return this.items.some(function(e){return e.label.toString().length>0})}},watch:{items:function(e){e.length>0&&this.setActiveItem(this.initialIndex)},activeIndex:function(e,t){this.resetItemPosition(t),this.$emit("change",e,t)},autoplay:function(e){e?this.startTimer():this.pauseTimer()}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var i=this.items.length;return t===i-1&&e.inStage&&this.items[0].active||e.inStage&&this.items[t+1]&&this.items[t+1].active?"left":!!(0===t&&e.inStage&&this.items[i-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(e){var t=this;this.items.forEach(function(i,n){e===t.itemInStage(i,n)&&(i.hover=!0)})},handleButtonLeave:function(){this.items.forEach(function(e){e.hover=!1})},updateItems:function(){this.items=this.$children.filter(function(e){return"ElCarouselItem"===e.$options.name})},resetItemPosition:function(e){var t=this;this.items.forEach(function(i,n){i.translateItem(n,t.activeIndex,e)})},playSlides:function(){this.activeIndex0&&(e=this.items.indexOf(t[0]))}if(e=Number(e),!isNaN(e)&&e===Math.floor(e)){var i=this.items.length;e<0?this.activeIndex=i-1:e>=i?this.activeIndex=0:this.activeIndex=e}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(e){this.activeIndex=e},handleIndicatorHover:function(e){"hover"===this.trigger&&e!==this.activeIndex&&(this.activeIndex=e)}},created:function(){var e=this;this.throttledArrowClick=(0,o.default)(300,!0,function(t){e.setActiveItem(t)}),this.throttledIndicatorHover=(0,o.default)(300,function(t){e.handleIndicatorHover(t)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){(0,r.addResizeListener)(e.$el,e.resetItemPosition),e.initialIndex=0&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&(0,r.removeResizeListener)(this.$el,this.resetItemPosition)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===e.type},on:{mouseenter:function(t){t.stopPropagation(),e.handleMouseEnter(t)},mouseleave:function(t){t.stopPropagation(),e.handleMouseLeave(t)}}},[i("div",{staticClass:"el-carousel__container",style:{height:e.height}},[i("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==e.arrow?i("button",{directives:[{name:"show",rawName:"v-show",value:"always"===e.arrow||e.hover,expression:"arrow === 'always' || hover"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",on:{mouseenter:function(t){e.handleButtonEnter("left")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex-1)}}},[i("i",{staticClass:"el-icon-arrow-left"})]):e._e()]),i("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==e.arrow?i("button",{directives:[{name:"show",rawName:"v-show",value:"always"===e.arrow||e.hover,expression:"arrow === 'always' || hover"}],staticClass:"el-carousel__arrow el-carousel__arrow--right",on:{mouseenter:function(t){e.handleButtonEnter("right")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex+1)}}},[i("i",{staticClass:"el-icon-arrow-right"})]):e._e()]),e._t("default")],2),"none"!==e.indicatorPosition?i("ul",{staticClass:"el-carousel__indicators",class:{"el-carousel__indicators--labels":e.hasLabel,"el-carousel__indicators--outside":"outside"===e.indicatorPosition||"card"===e.type}},e._l(e.items,function(t,n){return i("li",{staticClass:"el-carousel__indicator",class:{"is-active":n===e.activeIndex},on:{mouseenter:function(t){e.throttledIndicatorHover(n)},click:function(t){t.stopPropagation(),e.handleIndicatorClick(n)}}},[i("button",{staticClass:"el-carousel__button"},[e.hasLabel?i("span",[e._v(e._s(t.label))]):e._e()])])})):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1002),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(1003),i(1004),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i=.83;t.default={name:"ElCarouselItem",props:{name:String,label:{type:[String,Number],default:""}},data:function(){return{hover:!1,translate:0,scale:1,active:!1,ready:!1,inStage:!1,animating:!1}},methods:{processIndex:function(e,t,i){return 0===t&&e===i-1?-1:t===i-1&&0===e?i:e=i/2?i+1:e>t+1&&e-t>=i/2?-2:e},calculateTranslate:function(e,t,n){return this.inStage?n*((2-i)*(e-t)+1)/4:e2&&(e=this.processIndex(e,t,o)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,s),this.scale=this.active?1:i):(this.active=e===t,this.translate=s*(e-t)),this.ready=!0},handleItemClick:function(){var e=this.$parent;if(e&&"card"===e.type){var t=e.items.indexOf(this);e.setActiveItem(t)}}},created:function(){this.$parent&&this.$parent.updateItems()},destroyed:function(){this.$parent&&this.$parent.updateItems()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.ready,expression:"ready"}],staticClass:"el-carousel__item",class:{"is-active":e.active,"el-carousel__item--card":"card"===e.$parent.type,"is-in-stage":e.inStage,"is-hover":e.hover,"is-animating":e.animating},style:{msTransform:"translateX("+e.translate+"px) scale("+e.scale+")",webkitTransform:"translateX("+e.translate+"px) scale("+e.scale+")",transform:"translateX("+e.translate+"px) scale("+e.scale+")"},on:{click:e.handleItemClick}},["card"===e.$parent.type?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1006),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(1007),i(1008),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},watch:{value:function(e){this.activeNames=[].concat(e)}},methods:{setActiveNames:function(e){e=[].concat(e);var t=this.accordion?e[0]:e;this.activeNames=e,this.$emit("input",t),this.$emit("change",t)},handleItemClick:function(e){if(this.accordion)this.setActiveNames(!this.activeNames[0]&&0!==this.activeNames[0]||this.activeNames[0]!==e.name?e.name:"");else{var t=this.activeNames.slice(0),i=t.indexOf(e.name);i>-1?t.splice(i,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-collapse",attrs:{role:"tablist","aria-multiselectable":"true"}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1010),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(1011),i(1012),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(742),o=n(s),r=i(666),a=n(r),l=i(19);t.default={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[a.default],components:{ElCollapseTransition:o.default},data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0,focusing:!1}},props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return this.$parent.activeNames.indexOf(this.name)>-1},id:function(){return(0,l.generateId)()}},watch:{isActive:function(e){}},methods:{handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this),this.focusing=!1},handleEnterClick:function(){this.dispatch("ElCollapse","item-click",this)}},mounted:function(){}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-collapse-item",class:{"is-active":e.isActive}},[i("div",{attrs:{role:"tab","aria-expanded":e.isActive,"aria-controls":"el-collapse-content-"+e.id,"aria-describedby":"el-collapse-content-"+e.id}},[i("div",{staticClass:"el-collapse-item__header",class:{focusing:e.focusing},attrs:{role:"button",id:"el-collapse-head-"+e.id,tabindex:"0"},on:{click:e.handleHeaderClick,keyup:function(t){return"button"in t||!e._k(t.keyCode,"space",32)||!e._k(t.keyCode,"enter",13)?(t.stopPropagation(),void e.handleEnterClick(t)):null},focus:function(t){e.focusing=!0},blur:function(t){e.focusing=!1}}},[i("i",{staticClass:"el-collapse-item__arrow el-icon-arrow-right"}),e._t("title",[e._v(e._s(e.title))])],2)]),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap",attrs:{role:"tabpanel","aria-hidden":!e.isActive,"aria-labelledby":"el-collapse-head-"+e.id,id:"el-collapse-content-"+e.id}},[i("div",{staticClass:"el-collapse-item__content"},[e._t("default")],2)])])],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1014),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(1015),i(1019),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),r=i(1016),a=n(r),l=i(669),u=n(l),c=i(677),d=n(c),h=i(696),f=n(h),p=i(666),m=n(p),v=i(668),g=n(v),y=i(15),b=i(695),_=n(b),x={props:{placement:{type:String,default:"bottom-start"},appendToBody:d.default.props.appendToBody,offset:d.default.props.offset,boundariesPadding:d.default.props.boundariesPadding,popperOptions:d.default.props.popperOptions},methods:d.default.methods,data:d.default.data,beforeDestroy:d.default.beforeDestroy};t.default={name:"ElCascader",directives:{Clickoutside:f.default},mixins:[x,m.default,g.default],components:{ElInput:u.default},props:{options:{type:Array,required:!0},props:{type:Object,default:function(){return{children:"children",label:"label",value:"value",disabled:"disabled"}}},value:{type:Array,default:function(){return[]}},placeholder:{type:String,default:function(){return(0,y.t)("el.cascader.placeholder")}},disabled:Boolean,clearable:{type:Boolean,default:!1},changeOnSelect:Boolean,popperClass:String,expandTrigger:{type:String,default:"click"},filterable:Boolean,size:String,showAllLevels:{type:Boolean,default:!0},debounce:{type:Number,default:300},beforeFilter:{type:Function,default:function(){return function(){}}}},data:function(){return{currentValue:this.value||[],menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},currentLabels:function(){var e=this,t=this.options,i=[];return this.currentValue.forEach(function(n){var s=t&&t.filter(function(t){return t[e.valueKey]===n})[0];s&&(i.push(s[e.labelKey]),t=s[e.childrenKey])}),i}},watch:{menuVisible:function(e){e?this.showMenu():this.hideMenu()},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},options:{deep:!0,handler:function(e){this.menu||this.initMenu(),this.flatOptions=this.flattenOptions(this.options),this.menu.options=e}}},methods:{initMenu:function(){this.menu=new o.default(a.default).$mount(),this.menu.options=this.options,this.menu.props=this.props,this.menu.expandTrigger=this.expandTrigger,this.menu.changeOnSelect=this.changeOnSelect,this.menu.popperClass=this.popperClass,this.popperElm=this.menu.$el,this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy)},showMenu:function(){var e=this;this.menu||this.initMenu(),this.menu.value=this.currentValue.slice(0),this.menu.visible=!0,this.menu.options=this.options,this.$nextTick(function(t){e.updatePopper(),e.menu.inputWidth=e.$refs.input.$el.offsetWidth-2})},hideMenu:function(){this.inputValue="",this.menu.visible=!1},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handlePick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.currentValue=e,this.$emit("input",e),this.$emit("change",e),t?this.menuVisible=!1:this.$nextTick(this.updatePopper)},handleInputChange:function(e){var t=this;if(this.menuVisible){var i=this.flatOptions;if(!e)return this.menu.options=this.options,void this.$nextTick(this.updatePopper);var n=i.filter(function(i){return i.some(function(i){return new RegExp(e,"i").test(i[t.labelKey])})});n=n.length>0?n.map(function(i){return{__IS__FLAT__OPTIONS:!0,value:i.map(function(e){return e[t.valueKey]}),label:t.renderFilteredOptionLabel(e,i)}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=n,this.$nextTick(this.updatePopper)}},renderFilteredOptionLabel:function(e,t){var i=this;return t.map(function(t,n){var s=t[i.labelKey],o=s.toLowerCase().indexOf(e.toLowerCase()),r=s.slice(o,e.length+o),a=o>-1?i.highlightKeyword(s,r):s;return 0===n?a:[" / ",a]})},highlightKeyword:function(e,t){var i=this,n=this._c;return e.split(t).map(function(e,s){return 0===s?e:[n("span",{class:{"el-cascader-menu__item__keyword":!0}},[i._v(t)]),e]})},flattenOptions:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=[];return e.forEach(function(e){var s=i.concat(e);e[t.childrenKey]?(t.changeOnSelect&&n.push(s),n=n.concat(t.flattenOptions(e[t.childrenKey],s))):n.push(s)}),n},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){this.menuVisible=!1},handleClick:function(){if(!this.disabled)return this.filterable?(this.menuVisible=!0,void this.$refs.input.focus()):void(this.menuVisible=!this.menuVisible)}},created:function(){var e=this;this.debouncedInputChange=(0,_.default)(this.debounce,function(t){var i=e.beforeFilter(t);i&&i.then?(e.menu.options=[{__IS__FLAT__OPTIONS:!0,label:e.t("el.cascader.loading"),value:"",disabled:!0}],i.then(function(){e.$nextTick(function(){e.handleInputChange(t)})})):i!==!1&&e.$nextTick(function(){e.handleInputChange(t)})})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}}},function(e,t,i){var n=i(13)(i(1017),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(960),o=n(s),r=i(1018),a=i(697),l=n(a),u=function e(t,i){if(!t||!Array.isArray(t)||!i)return t;var n=[],s=["__IS__FLAT__OPTIONS","label","value","disabled"],o=i.children||"children";return t.forEach(function(t){var r={};s.forEach(function(e){var n=i[e],s=t[n];void 0===s&&(n=e,s=t[n]),void 0!==s&&(r[n]=s)}),Array.isArray(t[o])&&(r[o]=e(t[o],i)),n.push(r)}),n};t.default={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:""}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{cache:!1,get:function(){var e=this,t=this.activeValue,i=["label","value","children","disabled"],n=function t(n){n.forEach(function(n){n.__IS__FLAT__OPTIONS||(i.forEach(function(t){var i=n[e.props[t]||t];void 0!==i&&(n[t]=i)}),Array.isArray(n.children)&&t(n.children))})},s=function e(i){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],s=n.length;n[s]=i;var o=t[s];return(0,r.isDef)(o)&&(i=i.filter(function(e){return e.value===o})[0],i&&i.children&&e(i.children,n)),n},o=u(this.options,this.props);return n(o),s(o)}}},methods:{select:function(e,t){e.__IS__FLAT__OPTIONS?this.activeValue=e.value:t?this.activeValue.splice(t,this.activeValue.length-1,e.value):this.activeValue=[e.value],this.$emit("pick",this.activeValue.slice())},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var i=this.activeOptions.length;this.activeValue.splice(t,i,e.value),this.activeOptions.splice(t+1,i,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue.slice(),!1):this.$emit("activeItemChange",this.activeValue)},scrollMenu:function(e){(0,l.default)(e,e.getElementsByClassName("is-active")[0])},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.$refs.menus.forEach(function(t){return e.scrollMenu(t)})})}},render:function(e){var t=this,i=this.activeValue,n=this.activeOptions,s=this.visible,r=this.expandTrigger,a=this.popperClass,l=this._l(n,function(n,s){var a=!1,l=t._l(n,function(n){var l={on:{}};if(n.__IS__FLAT__OPTIONS&&(a=!0),!n.disabled)if(n.children){var u={click:"click",hover:"mouseenter"}[r];l.on[u]=function(){t.activeItem(n,s),t.$nextTick(function(){t.scrollMenu(t.$refs.menus[s]),t.scrollMenu(t.$refs.menus[s+1])})}}else l.on.click=function(){t.select(n,s),t.$nextTick(function(){return t.scrollMenu(t.$refs.menus[s])})};return e("li",(0,o.default)([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":n.children,"is-active":n.value===i[s],"is-disabled":n.disabled}},l]),[n.label])}),u={};return a&&(u.minWidth=t.inputWidth+"px"),e("ul",{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":a},style:u,refInFor:!0,ref:"menus"},[l])});return e("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":this.handleMenuEnter,"after-leave":this.handleMenuLeave}},[e("div",{directives:[{name:"show",value:s}],class:["el-cascader-menus el-popper",a],ref:"wrapper"},[e("div",{attrs:{"x-arrow":!0},class:"popper__arrow"},[]),l])])}}},function(e,t){"use strict";function i(e){return void 0!==e&&null!==e}t.__esModule=!0,t.isDef=i},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClickoutside,expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[{"is-opened":e.menuVisible,"is-disabled":e.disabled},e.size?"el-cascader--"+e.size:""],on:{click:e.handleClick,mouseenter:function(t){e.inputHover=!0},mouseleave:function(t){e.inputHover=!1}}},[i("el-input",{ref:"input",attrs:{readonly:!e.filterable,placeholder:e.currentLabels.length?void 0:e.placeholder,"validate-event":!1,size:e.size,disabled:e.disabled},on:{change:e.debouncedInputChange},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}},[i("template",{slot:"suffix"},[e.clearable&&e.inputHover&&e.currentLabels.length?i("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:e.clearValue}}):i("i",{key:"2",staticClass:"el-input__icon el-icon-arrow-down",class:{"is-reverse":e.menuVisible}})])],2),i("span",{directives:[{name:"show",rawName:"v-show",value:""===e.inputValue,expression:"inputValue === ''"}],staticClass:"el-cascader__label"},[e.showAllLevels?[e._l(e.currentLabels,function(t,n){return[e._v("\n "+e._s(t)+"\n "),n2?parseFloat(e):parseInt(e,10)});if(4===n.length&&(this._alpha=Math.floor(100*parseFloat(n[3]))),n.length>=3){var s=h(n[0],n[1],n[2]),o=s.h,r=s.s,a=s.v;i(o,r,a)}}else if(e.indexOf("hsv")!==-1){var l=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});4===l.length&&(this._alpha=Math.floor(100*parseFloat(l[3]))),l.length>=3&&i(l[0],l[1],l[2])}else if(e.indexOf("rgb")!==-1){var u=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});if(4===u.length&&(this._alpha=Math.floor(100*parseFloat(u[3]))),u.length>=3){var c=f(u[0],u[1],u[2]),p=c.h,m=c.s,v=c.v;i(p,m,v)}}else if(e.indexOf("#")!==-1){var g=e.replace("#","").trim(),y=void 0,b=void 0,_=void 0;3===g.length?(y=d(g[0]+g[0]),b=d(g[1]+g[1]),_=d(g[2]+g[2])):6===g.length&&(y=d(g.substring(0,2)),b=d(g.substring(2,4)),_=d(g.substring(4)));var x=f(y,b,_),C=x.h,w=x.s,k=x.v;i(C,w,k)}},e.prototype.doOnChange=function(){var e=this._hue,t=this._saturation,i=this._value,n=this._alpha,o=this.format;if(this.enableAlpha)switch(o){case"hsl":var r=s(e,t/100,i/100);this.value="hsla("+e+", "+Math.round(100*r[1])+"%, "+Math.round(100*r[2])+"%, "+n/100+")";break;case"hsv":this.value="hsva("+e+", "+Math.round(t)+"%, "+Math.round(i)+"%, "+n/100+")"; -break;default:var a=p(e,t,i),l=a.r,c=a.g,d=a.b;this.value="rgba("+l+", "+c+", "+d+", "+n/100+")"}else switch(o){case"hsl":var h=s(e,t/100,i/100);this.value="hsl("+e+", "+Math.round(100*h[1])+"%, "+Math.round(100*h[2])+"%)";break;case"hsv":this.value="hsv("+e+", "+Math.round(t)+"%, "+Math.round(i)+"%)";break;case"rgb":var f=p(e,t,i),m=f.r,v=f.g,g=f.b;this.value="rgb("+m+", "+v+", "+g+")";break;default:this.value=u(p(e,t,i))}},e}();t.default=m},function(e,t,i){var n=i(13)(i(1025),i(1036),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1026),o=n(s),r=i(1030),a=n(r),l=i(1033),u=n(l),c=i(677),d=n(c),h=i(668),f=n(h),p=i(669),m=n(p);t.default={name:"el-color-picker-dropdown",mixins:[d.default,f.default],components:{SvPanel:o.default,HueSlider:a.default,AlphaSlider:u.default,ElInput:m.default},props:{color:{required:!0},showAlpha:Boolean},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){var e=this.showAlpha?this.validRGBA(this.customInput):this.validRGBHex(this.customInput);e?this.color.fromString(this.customInput):this.customInput=this.currentColor},validRGBHex:function(e){return/^#[A-Fa-f0-9]{6}$/.test(e)},validRGBA:function(e){var t=e.match(/^rgba\((\d+), ?(\d+), ?(\d+), ?([.0-9]+)\)$/);if(!t)return!1;var i=t.map(function(e){return parseInt(e,10)}).slice(1);if(i.some(function(e){return isNaN(e)}))return!1;var n=i[0],s=i[1],o=i[2],r=i[3];return!([n,s,o].some(function(e){return e<0||e>255})||r<0||r>1)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var t=this;e===!0&&this.$nextTick(function(){var e=t.$refs,i=e.sl,n=e.hue,s=e.alpha;i&&i.update(),n&&n.update(),s&&s.update()})},currentColor:function(e){this.customInput=e}}}},function(e,t,i){var n=i(13)(i(1027),i(1029),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1028),o=n(s);t.default={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){var e=this.color.get("hue"),t=this.color.get("value");return{hue:e,value:t}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.getBoundingClientRect(),s=n.width,o=n.height;o||(o=3*s/4),this.cursorLeft=e*s/100,this.cursorTop=(100-t)*o/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el,i=t.getBoundingClientRect(),n=e.clientX-i.left,s=e.clientY-i.top;n=Math.max(0,n),n=Math.min(n,i.width),s=Math.max(0,s),s=Math.min(s,i.height),this.cursorLeft=n,this.cursorTop=s,this.color.set({saturation:n/i.width*100,value:100-s/i.height*100})}},mounted:function(){var e=this;(0,o.default)(this.$el,{drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e,t){if(!o.default.prototype.$isServer){var i=function(e){t.drag&&t.drag(e)},n=function e(n){document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,r=!1,t.end&&t.end(n)};e.addEventListener("mousedown",function(e){r||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",i),document.addEventListener("mouseup",n),r=!0,t.start&&t.start(e))})}};var s=i(2),o=n(s),r=!1},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-svpanel",style:{backgroundColor:e.background}},[i("div",{staticClass:"el-color-svpanel__white"}),i("div",{staticClass:"el-color-svpanel__black"}),i("div",{staticClass:"el-color-svpanel__cursor",style:{top:e.cursorTop+"px",left:e.cursorLeft+"px"}},[i("div")])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(1031),i(1032),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1028),o=n(s);t.default={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){var e=this.color.get("hue");return e}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb,i=e.target;i!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var s=e.clientY-t.top;s=Math.min(s,t.height-i.offsetHeight/2),s=Math.max(i.offsetHeight/2,s),n=Math.round((s-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var o=e.clientX-t.left;o=Math.min(o,t.width-i.offsetWidth/2),o=Math.max(i.offsetWidth/2,o),n=Math.round((o-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var e=this,t=this.$refs,i=t.bar,n=t.thumb,s={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};(0,o.default)(i,s),(0,o.default)(n,s),this.update()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":e.vertical}},[i("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:e.handleClick}}),i("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:e.thumbLeft+"px",top:e.thumbTop+"px"}})])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(1034),i(1035),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1028),o=n(s);t.default={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb,i=e.target;i!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var s=e.clientX-t.left;s=Math.max(i.offsetWidth/2,s),s=Math.min(s,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((s-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var e=this,t=this.$refs,i=t.bar,n=t.thumb,s={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};(0,o.default)(i,s),(0,o.default)(n,s),this.update()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":e.vertical}},[i("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:e.background},on:{click:e.handleClick}}),i("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:e.thumbLeft+"px",top:e.thumbTop+"px"}})])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:e.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:e.color}})],1),e.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:e.color}}):e._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[i("el-input",{attrs:{size:"mini"},on:{blur:e.handleConfirm},nativeOn:{keyup:function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?void e.handleConfirm(t):null}},model:{value:e.customInput,callback:function(t){e.customInput=t},expression:"customInput"}})],1),i("a",{staticClass:"el-color-dropdown__link-btn",attrs:{href:"JavaScript:"},on:{click:function(t){e.$emit("clear")}}},[e._v(e._s(e.t("el.colorpicker.clear")))]),i("button",{staticClass:"el-color-dropdown__btn",on:{click:e.confirmValue}},[e._v(e._s(e.t("el.colorpicker.confirm")))])])],1)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.hide,expression:"hide"}],class:["el-color-picker",e.disabled?"is-disabled":"",e.size?"el-color-picker--"+e.size:""]},[e.disabled?i("div",{staticClass:"el-color-picker__mask"}):e._e(),i("div",{staticClass:"el-color-picker__trigger",on:{click:e.handleTrigger}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":e.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:e.displayedColor}}),e.value||e.showPanelColor?e._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{directives:[{name:"show",rawName:"v-show",value:e.value||e.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),i("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",e.popperClass||""],attrs:{color:e.color,"show-alpha":e.showAlpha},on:{pick:e.confirmValue,clear:e.clearValue},model:{value:e.showPicker,callback:function(t){e.showPicker=t},expression:"showPicker"}})],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1039),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(1040),i(1044),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(715),o=n(s),r=i(666),a=n(r),l=i(668),u=n(l),c=i(1041),d=n(c);t.default={name:"ElTransfer",mixins:[a.default,u.default],components:{TransferPanel:d.default,ElButton:o.default},props:{data:{type:Array,default:function(){return[]}},titles:{type:Array,default:function(){return[]}},buttonTexts:{type:Array,default:function(){return[]}},filterPlaceholder:{type:String,default:""},filterMethod:Function,leftDefaultChecked:{type:Array,default:function(){return[]}},rightDefaultChecked:{type:Array,default:function(){return[]}},renderContent:Function,value:{type:Array,default:function(){return[]}},format:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{sourceData:function(){var e=this;return this.data.filter(function(t){return e.value.indexOf(t[e.props.key])===-1})},targetData:function(){var e=this;return this.data.filter(function(t){return e.value.indexOf(t[e.props.key])>-1})},hasButtonTexts:function(){return 2===this.buttonTexts.length}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{onSourceCheckedChange:function(e){this.leftChecked=e},onTargetCheckedChange:function(e){this.rightChecked=e},addToLeft:function(){var e=this.value.slice();this.rightChecked.forEach(function(t){var i=e.indexOf(t);i>-1&&e.splice(i,1)}),this.$emit("input",e),this.$emit("change",e,"left",this.rightChecked)},addToRight:function(){var e=this,t=this.value.slice();this.leftChecked.forEach(function(i){e.value.indexOf(i)===-1&&(t=t.concat(i))}),this.$emit("input",t),this.$emit("change",t,"right",this.leftChecked)}}}},function(e,t,i){var n=i(13)(i(1042),i(1043),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(777),o=n(s),r=i(769),a=n(r),l=i(669),u=n(l),c=i(668),d=n(c);t.default={mixins:[d.default],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:o.default,ElCheckbox:a.default,ElInput:u.default,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t},i=t(this);return i.renderContent?i.renderContent(e,this.option):e("span",null,[this.option[i.labelProp]||this.option[i.keyProp]])}}},props:{data:{type:Array,default:function(){return[]}},renderContent:Function,placeholder:String,title:String,filterable:Boolean,format:Object,filterMethod:Function,defaultChecked:Array,props:Object},data:function(){return{checked:[],allChecked:!1,query:"",inputHover:!1}},watch:{checked:function(e){this.updateAllChecked(),this.$emit("checked-change",e)},data:function(){var e=this,t=[],i=this.filteredData.map(function(t){return t[e.keyProp]});this.checked.forEach(function(e){i.indexOf(e)>-1&&t.push(e)}),this.checked=t},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var i=this;if(!t||e.length!==t.length||!e.every(function(e){return t.indexOf(e)>-1})){var n=[],s=this.checkableData.map(function(e){return e[i.keyProp]});e.forEach(function(e){s.indexOf(e)>-1&&n.push(e)}),this.checked=n}}}},computed:{filteredData:function(){var e=this;return this.data.filter(function(t){if("function"==typeof e.filterMethod)return e.filterMethod(e.query,t);var i=t[e.labelProp]||t[e.keyProp].toString();return i.toLowerCase().indexOf(e.query.toLowerCase())>-1})},checkableData:function(){var e=this;return this.filteredData.filter(function(t){return!t[e.disabledProp]})},checkedSummary:function(){var e=this.checked.length,t=this.data.length,i=this.format,n=i.noChecked,s=i.hasChecked;return n&&s?e>0?s.replace(/\${checked}/g,e).replace(/\${total}/g,t):n.replace(/\${total}/g,t):e+"/"+t},isIndeterminate:function(){var e=this.checked.length;return e>0&&e0&&0===this.filteredData.length},inputIcon:function(){return this.query.length>0&&this.inputHover?"circle-close":"search"},labelProp:function(){return this.props.label||"label"},keyProp:function(){return this.props.key||"key"},disabledProp:function(){return this.props.disabled||"disabled"},hasFooter:function(){return!!this.$slots.default}},methods:{updateAllChecked:function(){var e=this,t=this.checkableData.map(function(t){return t[e.keyProp]});this.allChecked=t.length>0&&t.every(function(t){return e.checked.indexOf(t)>-1})},handleAllCheckedChange:function(e){var t=this;this.checked=e?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-transfer-panel"},[i("p",{staticClass:"el-transfer-panel__header"},[i("el-checkbox",{attrs:{indeterminate:e.isIndeterminate},on:{change:e.handleAllCheckedChange},model:{value:e.allChecked,callback:function(t){e.allChecked=t},expression:"allChecked"}},[e._v("\n "+e._s(e.title)+"\n "),i("span",[e._v(e._s(e.checkedSummary))])])],1),i("div",{class:["el-transfer-panel__body",e.hasFooter?"is-with-footer":""]},[e.filterable?i("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:e.placeholder},nativeOn:{mouseenter:function(t){e.inputHover=!0},mouseleave:function(t){e.inputHover=!1}},model:{value:e.query,callback:function(t){e.query=t},expression:"query"}},[i("i",{class:["el-input__icon","el-icon-"+e.inputIcon],on:{click:e.clearQuery},slot:"prefix"})]):e._e(),i("el-checkbox-group",{directives:[{name:"show",rawName:"v-show",value:!e.hasNoMatch&&e.data.length>0,expression:"!hasNoMatch && data.length > 0"}],staticClass:"el-transfer-panel__list",class:{"is-filterable":e.filterable},model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},e._l(e.filteredData,function(t){return i("el-checkbox",{key:t[e.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:t[e.keyProp],disabled:t[e.disabledProp]}},[i("option-content",{attrs:{option:t}})],1)})),i("p",{directives:[{name:"show",rawName:"v-show",value:e.hasNoMatch,expression:"hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[e._v(e._s(e.t("el.transfer.noMatch")))]),i("p",{directives:[{name:"show",rawName:"v-show",value:0===e.data.length&&!e.hasNoMatch,expression:"data.length === 0 && !hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[e._v(e._s(e.t("el.transfer.noData")))])],1),e.hasFooter?i("p",{staticClass:"el-transfer-panel__footer"},[e._t("default")],2):e._e()])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-transfer"},[i("transfer-panel",e._b({attrs:{data:e.sourceData,title:e.titles[0]||e.t("el.transfer.titles.0"),"default-checked":e.leftDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder")},on:{"checked-change":e.onSourceCheckedChange}},"transfer-panel",e.$props),[e._t("left-footer")],2),i("div",{staticClass:"el-transfer__buttons"},[i("el-button",{class:["el-transfer__button",e.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===e.rightChecked.length},nativeOn:{click:function(t){e.addToLeft(t)}}},[i("i",{staticClass:"el-icon-arrow-left"}),void 0!==e.buttonTexts[0]?i("span",[e._v(e._s(e.buttonTexts[0]))]):e._e()]),i("el-button",{class:["el-transfer__button",e.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===e.leftChecked.length},nativeOn:{click:function(t){e.addToRight(t)}}},[void 0!==e.buttonTexts[1]?i("span",[e._v(e._s(e.buttonTexts[1]))]):e._e(),i("i",{staticClass:"el-icon-arrow-right"})])],1),i("transfer-panel",e._b({attrs:{data:e.targetData,title:e.titles[1]||e.t("el.transfer.titles.1"),"default-checked":e.rightDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder")},on:{"checked-change":e.onTargetCheckedChange}},"transfer-panel",e.$props),[e._t("right-footer")],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1046),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(1047),i(1048),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElContainer",componentName:"ElContainer",props:{direction:String},computed:{isVertical:function(){return"vertical"===this.direction||"horizontal"!==this.direction&&(!(!this.$slots||!this.$slots.default)&&this.$slots.default.some(function(e){var t=e.componentOptions&&e.componentOptions.tag;return"el-header"===t||"el-footer"===t}))}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("section",{staticClass:"el-container",class:{"is-vertical":e.isVertical}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1050),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(1051),i(1052),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElHeader",componentName:"ElHeader",props:{height:{type:String,default:"60px"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("header",{staticClass:"el-header",style:{height:e.height}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1054),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(1055),i(1056),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElAside",componentName:"ElAside",props:{width:{type:String,default:"300px"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("aside",{staticClass:"el-aside",style:{width:e.width}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1058),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(1059),i(1060),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElMain",componentName:"ElMain"}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("main",{staticClass:"el-main"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1062),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(1063),i(1064),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElFooter",componentName:"ElFooter",props:{height:{type:String,default:"60px"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("footer",{staticClass:"el-footer",style:{height:e.height}},[e._t("default")],2)},staticRenderFns:[]}}]); \ No newline at end of file diff --git a/2.0/element-ui.ca7273e.js b/2.0/element-ui.ca7273e.js new file mode 100644 index 000000000..336039027 --- /dev/null +++ b/2.0/element-ui.ca7273e.js @@ -0,0 +1 @@ +webpackJsonp([2],[function(e,t){e.exports=function(e,t,i,n,s,a){var r,o=e=e||{},l=typeof e.default;"object"!==l&&"function"!==l||(r=e,o=e.default);var u="function"==typeof o?o.options:o;t&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0),i&&(u.functional=!0),s&&(u._scopeId=s);var c;if(a?(c=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},u._ssrRegister=c):n&&(c=n),c){var d=u.functional,h=d?u.render:u.beforeCreate;d?(u._injectStyles=c,u.render=function(e,t){return c.call(t),h(e,t)}):u.beforeCreate=h?[].concat(h,c):[c]}return{esModule:r,exports:o,options:u}}},function(e,t,i){"use strict";function n(e,t,i){this.$children.forEach(function(s){s.$options.componentName===e?s.$emit.apply(s,[t].concat(i)):n.apply(s,[e,t].concat([i]))})}t.__esModule=!0,t.default={methods:{dispatch:function(e,t,i){for(var n=this.$parent||this.$root,s=n.$options.componentName;n&&(!s||s!==e);)(n=n.$parent)&&(s=n.$options.componentName);n&&n.$emit.apply(n,[t].concat(i))},broadcast:function(e,t,i){n.call(this,e,t,i)}}}},function(e,t){e.exports=Vue},function(e,t,i){"use strict";function n(){for(var e=arguments.length,t=Array(e),i=0;i=a)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}break;default:return e}}),o=t[n];n-1}function s(e,t){if(e){for(var i=e.className,s=(t||"").split(" "),a=0,r=s.length;a-1?"center "+i:i+" center"},appendArrow:function(e){var t=void 0;if(!this.appended){this.appended=!0;for(var i in e.attributes)if(/^_v-/.test(e.attributes[i].name)){t=e.attributes[i].name;break}var n=document.createElement("div");t&&n.setAttribute(t,""),n.setAttribute("x-arrow",""),n.className="popper__arrow",e.appendChild(n)}}},beforeDestroy:function(){this.doDestroy(),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",o),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}}},function(e,t,i){"use strict";t.__esModule=!0,t.nextDate=t.prevDate=t.nextYear=t.prevYear=t.nextMonth=t.prevMonth=t.timeWithinRange=t.limitTimeRange=t.clearMilliseconds=t.clearTime=t.modifyTime=t.modifyDate=t.range=t.getRangeHours=t.getWeekNumber=t.getStartDateOfMonth=t.DAY_DURATION=t.getFirstDayOfMonth=t.getDayCountOfMonth=t.parseDate=t.formatDate=t.isDateObject=t.isDate=t.toDate=void 0;var n=i(71),s=function(e){return e&&e.__esModule?e:{default:e}}(n),a=i(12),r=["sun","mon","tue","wed","thu","fri","sat"],o=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],l=function(){return{dayNamesShort:r.map(function(e){return(0,a.t)("el.datepicker.weeks."+e)}),dayNames:r.map(function(e){return(0,a.t)("el.datepicker.weeks."+e)}),monthNamesShort:o.map(function(e){return(0,a.t)("el.datepicker.months."+e)}),monthNames:o.map(function(e,t){return(0,a.t)("el.datepicker.month"+(t+1))}),amPm:["am","pm"]}},u=function(e,t){for(var i=[],n=e;n<=t;n++)i.push(n);return i},c=t.toDate=function(e){return d(e)?new Date(e):null},d=t.isDate=function(e){return null!==e&&void 0!==e&&!isNaN(new Date(e).getTime())},h=(t.isDateObject=function(e){return e instanceof Date},t.formatDate=function(e,t){return e=c(e),e?s.default.format(e,t||"yyyy-MM-dd",l()):""},t.parseDate=function(e,t){return s.default.parse(e,t||"yyyy-MM-dd",l())},t.getDayCountOfMonth=function(e,t){return 3===t||5===t||8===t||10===t?30:1===t?e%4==0&&e%100!=0||e%400==0?29:28:31}),f=(t.getFirstDayOfMonth=function(e){var t=new Date(e.getTime());return t.setDate(1),t.getDay()},t.DAY_DURATION=864e5),p=(t.getStartDateOfMonth=function(e,t){var i=new Date(e,t,1),n=i.getDay();return 0===n?i.setTime(i.getTime()-7*f):i.setTime(i.getTime()-f*n),i},t.getWeekNumber=function(e){var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var i=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-i.getTime())/864e5-3+(i.getDay()+6)%7)/7)},t.getRangeHours=function(e){var t=[],i=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});i=i.concat(u(t[0],t[1]))}),i.length)for(var n=0;n<24;n++)t[n]=-1===i.indexOf(n);else for(var s=0;s<24;s++)t[s]=!1;return t},t.range=function(e){return Array.apply(null,{length:e}).map(function(e,t){return t})},t.modifyDate=function(e,t,i,n){return new Date(t,i,n,e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds())}),m=(t.modifyTime=function(e,t,i,n){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),t,i,n,e.getMilliseconds())},t.clearTime=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())},t.clearMilliseconds=function(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),0)},t.limitTimeRange=function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"HH:mm:ss";if(0===t.length)return e;var n=function(e){return s.default.parse(s.default.format(e,i),i)},a=n(e),r=t.map(function(e){return e.map(n)});if(r.some(function(e){return a>=e[0]&&a<=e[1]}))return e;var o=r[0][0],l=r[0][0];return r.forEach(function(e){o=new Date(Math.min(e[0],o)),l=new Date(Math.max(e[1],o))}),p(a1&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear()-t,n=e.getMonth(),s=Math.min(e.getDate(),h(i,n));return p(e,i,n,s)},t.nextYear=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=e.getFullYear()+t,n=e.getMonth(),s=Math.min(e.getDate(),h(i,n));return p(e,i,n,s)},t.prevDate=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()-t)},t.nextDate=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return new Date(e.getFullYear(),e.getMonth(),e.getDate()+t)}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.i18n=t.use=t.t=void 0;var s=i(50),a=n(s),r=i(2),o=n(r),l=i(78),u=n(l),c=i(79),d=n(c),h=(0,d.default)(o.default),f=a.default,p=!1,m=function(){var e=Object.getPrototypeOf(this||o.default).$t;if("function"==typeof e&&o.default.locale)return p||(p=!0,o.default.locale(o.default.config.lang,(0,u.default)(f,o.default.locale(o.default.config.lang)||{},{clone:!0}))),e.apply(this,arguments)},v=t.t=function(e,t){var i=m.apply(this,arguments);if(null!==i&&void 0!==i)return i;for(var n=e.split("."),s=f,a=0,r=n.length;a0&&void 0!==arguments[0]?arguments[0]:{},s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!(i.context&&n.target&&s.target)||e.contains(n.target)||e.contains(s.target)||e===n.target||i.context.popperElm&&(i.context.popperElm.contains(n.target)||i.context.popperElm.contains(s.target))||(t.expression&&e[o].methodName&&i.context[e[o].methodName]?i.context[e[o].methodName]():e[o].bindingFn&&e[o].bindingFn())};e[o]={id:n,documentHandler:s,methodName:t.expression,bindingFn:t.value}},update:function(e,t){e[o].methodName=t.expression,e[o].bindingFn=t.value},unbind:function(e){for(var t=r.length,i=0;i0?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(i)},n):this.doOpen(i)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0;var t=g(this.$el),i=e.modal,n=e.zIndex;if(n&&(u.default.zIndex=n),i&&(this._closing&&(u.default.closeModal(this._popupId),this._closing=!1),u.default.openModal(this._popupId,u.default.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.bodyOverflow||(this.bodyPaddingRight=document.body.style.paddingRight,this.bodyOverflow=document.body.style.overflow),v=(0,d.default)();var s=document.documentElement.clientHeight0&&(s||"scroll"===a)&&(document.body.style.paddingRight=v+"px"),document.body.style.overflow="hidden"}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=u.default.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),this.transition||this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);t>0?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){var e=this;this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(function(){e.modal&&"hidden"!==e.bodyOverflow&&(document.body.style.overflow=e.bodyOverflow,document.body.style.paddingRight=e.bodyPaddingRight),e.bodyOverflow=null,e.bodyPaddingRight=null},200),this.opened=!1,this.transition||this.doAfterClose()},doAfterClose:function(){u.default.closeModal(this._popupId),this._closing=!1}}},t.PopupManager=u.default},,,function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var s=i(88),a=n(s),r=i(114),o=n(r),l=i(118),u=n(l),c=i(125),d=n(c),h=i(134),f=n(h),p=i(138),m=n(p),v=i(142),g=n(v),y=i(149),b=n(y),_=i(153),C=n(_),x=i(157),w=n(x),k=i(7),S=n(k),M=i(56),$=n(M),D=i(164),E=n(D),T=i(168),P=n(T),O=i(172),N=n(O),F=i(14),I=n(F),V=i(179),A=n(V),L=i(37),B=n(L),z=i(186),R=n(z),H=i(51),j=n(H),W=i(53),q=n(W),K=i(190),Y=n(K),G=i(28),U=n(G),X=i(54),J=n(X),Z=i(194),Q=n(Z),ee=i(208),te=n(ee),ie=i(210),ne=n(ie),se=i(232),ae=n(se),re=i(237),oe=n(re),le=i(242),ue=n(le),ce=i(39),de=n(ce),he=i(247),fe=n(he),pe=i(253),me=n(pe),ve=i(257),ge=n(ve),ye=i(261),be=n(ye),_e=i(265),Ce=n(_e),xe=i(290),we=n(xe),ke=i(298),Se=n(ke),Me=i(27),$e=n(Me),De=i(302),Ee=n(De),Te=i(311),Pe=n(Te),Oe=i(315),Ne=n(Oe),Fe=i(320),Ie=n(Fe),Ve=i(327),Ae=n(Ve),Le=i(332),Be=n(Le),ze=i(336),Re=n(ze),He=i(338),je=n(He),We=i(340),qe=n(We),Ke=i(43),Ye=n(Ke),Ge=i(357),Ue=n(Ge),Xe=i(361),Je=n(Xe),Ze=i(366),Qe=n(Ze),et=i(370),tt=n(et),it=i(374),nt=n(it),st=i(378),at=n(st),rt=i(382),ot=n(rt),lt=i(386),ut=n(lt),ct=i(23),dt=n(ct),ht=i(390),ft=n(ht),pt=i(394),mt=n(pt),vt=i(398),gt=n(vt),yt=i(402),bt=n(yt),_t=i(409),Ct=n(_t),xt=i(426),wt=n(xt),kt=i(433),St=n(kt),Mt=i(437),$t=n(Mt),Dt=i(441),Et=n(Dt),Tt=i(445),Pt=n(Tt),Ot=i(449),Nt=n(Ot),Ft=i(12),It=n(Ft),Vt=i(29),At=n(Vt),Lt=[a.default,o.default,u.default,d.default,f.default,m.default,g.default,b.default,C.default,w.default,S.default,$.default,E.default,P.default,N.default,I.default,A.default,B.default,R.default,j.default,q.default,Y.default,U.default,J.default,Q.default,te.default,ne.default,ae.default,oe.default,ue.default,de.default,me.default,ge.default,be.default,Ce.default,we.default,Se.default,$e.default,Ee.default,Pe.default,Ie.default,Be.default,Re.default,je.default,qe.default,Ye.default,Ue.default,Qe.default,tt.default,nt.default,at.default,ot.default,ut.default,dt.default,ft.default,mt.default,gt.default,bt.default,Ct.default,wt.default,St.default,$t.default,Et.default,Pt.default,Nt.default,At.default],Bt=function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e.installed){It.default.use(i.locale),It.default.i18n(i.i18n),Lt.map(function(e){t.component(e.name,e)}),t.use(Ae.default.directive);var n={};n.size=i.size||"",t.prototype.$loading=Ae.default.service,t.prototype.$msgbox=fe.default,t.prototype.$alert=fe.default.alert,t.prototype.$confirm=fe.default.confirm,t.prototype.$prompt=fe.default.prompt,t.prototype.$notify=Ne.default,t.prototype.$message=Je.default,t.prototype.$ELEMENT=n}};"undefined"!=typeof window&&window.Vue&&Bt(window.Vue),e.exports={version:"2.0.0-alpha.3",locale:It.default.use,i18n:It.default.i18n,install:Bt,CollapseTransition:At.default,Loading:Ae.default,Pagination:a.default,Dialog:o.default,Autocomplete:u.default,Dropdown:d.default,DropdownMenu:f.default,DropdownItem:m.default,Menu:g.default,Submenu:b.default,MenuItem:C.default,MenuItemGroup:w.default,Input:S.default,InputNumber:$.default,Radio:E.default,RadioGroup:P.default,RadioButton:N.default,Checkbox:I.default,CheckboxButton:A.default,CheckboxGroup:B.default,Switch:R.default,Select:j.default,Option:q.default,OptionGroup:Y.default,Button:U.default,ButtonGroup:J.default,Table:Q.default,TableColumn:te.default,DatePicker:ne.default,TimeSelect:ae.default,TimePicker:oe.default,Popover:ue.default,Tooltip:de.default,MessageBox:fe.default,Breadcrumb:me.default,BreadcrumbItem:ge.default,Form:be.default,FormItem:Ce.default,Tabs:we.default,TabPane:Se.default,Tag:$e.default,Tree:Ee.default,Alert:Pe.default,Notification:Ne.default,Slider:Ie.default,Icon:Be.default,Row:Re.default,Col:je.default,Upload:qe.default,Progress:Ye.default,Spinner:Ue.default,Message:Je.default,Badge:Qe.default,Card:tt.default,Rate:nt.default,Steps:at.default,Step:ot.default,Carousel:ut.default,Scrollbar:dt.default,CarouselItem:ft.default,Collapse:mt.default,CollapseItem:gt.default,Cascader:bt.default,ColorPicker:Ct.default,Transfer:wt.default,Container:St.default,Header:$t.default,Aside:Et.default,Main:Pt.default,Footer:Nt.default}},function(e,t,i){"use strict";t.__esModule=!0,t.default=function(e){return{methods:{focus:function(){this.$refs[e].focus()}}}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(109),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";t.__esModule=!0;var n="undefined"==typeof window,s=function(){if(!n){var e=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){return window.setTimeout(e,20)};return function(t){return e(t)}}}(),a=function(){if(!n){var e=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.clearTimeout;return function(t){return e(t)}}}(),r=function(e){var t=e.__resizeTrigger__,i=t.firstElementChild,n=t.lastElementChild,s=i.firstElementChild;n.scrollLeft=n.scrollWidth,n.scrollTop=n.scrollHeight,s.style.width=i.offsetWidth+1+"px",s.style.height=i.offsetHeight+1+"px",i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight},o=function(e){return e.offsetWidth!==e.__resizeLast__.width||e.offsetHeight!==e.__resizeLast__.height},l=function(e){var t=this;r(this),this.__resizeRAF__&&a(this.__resizeRAF__),this.__resizeRAF__=s(function(){o(t)&&(t.__resizeLast__.width=t.offsetWidth,t.__resizeLast__.height=t.offsetHeight,t.__resizeListeners__.forEach(function(i){i.call(t,e)}))})},u=n?{}:document.attachEvent,c="Webkit Moz O ms".split(" "),d="webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),h=!1,f="",p="animationstart";if(!u&&!n){var m=document.createElement("fakeelement");if(void 0!==m.style.animationName&&(h=!0),!1===h)for(var v="",g=0;g div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1 }\n .resize-triggers > div { background: #eee; overflow: auto; }\n .contract-trigger:before { width: 200%; height: 200%; }',s=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",a.styleSheet?a.styleSheet.cssText=i:a.appendChild(document.createTextNode(i)),s.appendChild(a),y=!0}};t.addResizeListener=function(e,t){if(!n)if(u)e.attachEvent("onresize",t);else{if(!e.__resizeTrigger__){"static"===getComputedStyle(e).position&&(e.style.position="relative"),b(),e.__resizeLast__={},e.__resizeListeners__=[];var i=e.__resizeTrigger__=document.createElement("div");i.className="resize-triggers",i.innerHTML='
',e.appendChild(i),r(e),e.addEventListener("scroll",l,!0),p&&i.addEventListener(p,function(t){"resizeanim"===t.animationName&&r(e)})}e.__resizeListeners__.push(t)}},t.removeResizeListener=function(e,t){e&&e.__resizeListeners__&&(u?e.detachEvent("onresize",t):(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||(e.removeEventListener("scroll",l),e.__resizeTrigger__=!e.removeChild(e.__resizeTrigger__))))}},,,function(e,t,i){"use strict";t.__esModule=!0;var n=i(106),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";t.__esModule=!0;var n=i(128),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var s=i(4),a=function(){function e(){n(this,e)}return e.prototype.beforeEnter=function(e){(0,s.addClass)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?(e.style.height=e.scrollHeight+"px",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom):(e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom),e.style.overflow="hidden"},e.prototype.afterEnter=function(e){(0,s.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&((0,s.addClass)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){(0,s.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}();t.default={name:"ElCollapseTransition",functional:!0,render:function(e,t){var i=t.children;return e("transition",{on:new a},i)}}},function(e,t,i){"use strict";function n(e){return"object"===(void 0===e?"undefined":a(e))&&(0,r.hasOwn)(e,"componentOptions")}function s(e){return e&&e.filter(function(e){return e&&e.tag})[0]}t.__esModule=!0;var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.isVNode=n,t.getFirstComponentChild=s;var r=i(9)},,,function(e,t){e.exports=function(e,t,i,n){function s(){function s(){r=Number(new Date),i.apply(l,c)}function o(){a=void 0}var l=this,u=Number(new Date)-r,c=arguments;n&&!a&&s(),a&&clearTimeout(a),void 0===n&&u>e?s():!0!==t&&(a=setTimeout(n?o:s,void 0===n?e-u:e))}var a,r=0;return"boolean"!=typeof t&&(n=i,i=t,t=void 0),s}},function(e,t,i){"use strict";t.__esModule=!0,t.default=function(){if(s.default.prototype.$isServer)return 0;if(void 0!==a)return a;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");i.style.width="100%",e.appendChild(i);var n=i.offsetWidth;return e.parentNode.removeChild(e),a=t-n};var n=i(2),s=function(e){return e&&e.__esModule?e:{default:e}}(n),a=void 0},function(e,t,i){"use strict";function n(e,t){if(!a.default.prototype.$isServer){if(!t)return void(e.scrollTop=0);var i=t.offsetTop,n=t.offsetTop+t.offsetHeight,s=e.scrollTop,r=s+e.clientHeight;ir&&(e.scrollTop=n-e.clientHeight)}}t.__esModule=!0,t.default=n;var s=i(2),a=function(e){return e&&e.__esModule?e:{default:e}}(s)},function(e,t,i){"use strict";t.__esModule=!0;var n=n||{};n.Utils=n.Utils||{},n.Utils.focusFirstDescendant=function(e){for(var t=0;t=0;t--){var i=e.childNodes[t];if(n.Utils.attemptFocus(i)||n.Utils.focusLastDescendant(i))return!0}return!1},n.Utils.attemptFocus=function(e){if(!n.Utils.isFocusable(e))return!1;n.Utils.IgnoreUtilFocusChanges=!0;try{e.focus()}catch(e){}return n.Utils.IgnoreUtilFocusChanges=!1,document.activeElement===e},n.Utils.isFocusable=function(e){if(e.tabIndex>0||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!==e.rel;case"INPUT":return"hidden"!==e.type&&"file"!==e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},n.Utils.triggerEvent=function(e,t){var i=void 0;i=/^mouse|click/.test(t)?"MouseEvents":/^key/.test(t)?"KeyboardEvent":"HTMLEvents";for(var n=document.createEvent(i),s=arguments.length,a=Array(s>2?s-2:0),r=2;ri?r:-r})},t.getColumnById=function(e,t){var i=null;return e.columns.forEach(function(e){e.id===t&&(i=e)}),i}),o=(t.getColumnByCell=function(e,t){var i=(t.className||"").match(/el-table_[^\s]+/gm);return i?r(e,i[0]):null},"undefined"!=typeof navigator&&navigator.userAgent.toLowerCase().indexOf("firefox")>-1);t.mousewheel=function(e,t){e&&e.addEventListener&&e.addEventListener(o?"DOMMouseScroll":"mousewheel",t)},t.getRowIdentity=function(e,t){if(!e)throw new Error("row is required when get row identity");if("string"==typeof t){if(t.indexOf(".")<0)return e[t];for(var i=t.split("."),n=e,s=0;s3?0:(e-e%10!=10)*e%10]}};var b={D:function(e){return e.getDay()},DD:function(e){return o(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return o(e.getDate())},ddd:function(e,t){return t.dayNamesShort[e.getDay()]},dddd:function(e,t){return t.dayNames[e.getDay()]},M:function(e){return e.getMonth()+1},MM:function(e){return o(e.getMonth()+1)},MMM:function(e,t){return t.monthNamesShort[e.getMonth()]},MMMM:function(e,t){return t.monthNames[e.getMonth()]},yy:function(e){return String(e.getFullYear()).substr(2)},yyyy:function(e){return e.getFullYear()},h:function(e){return e.getHours()%12||12},hh:function(e){return o(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return o(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return o(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return o(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return o(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return o(e.getMilliseconds(),3)},a:function(e,t){return e.getHours()<12?t.amPm[0]:t.amPm[1]},A:function(e,t){return e.getHours()<12?t.amPm[0].toUpperCase():t.amPm[1].toUpperCase()},ZZ:function(e){var t=e.getTimezoneOffset();return(t>0?"-":"+")+o(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},_={d:[c,function(e,t){e.day=t}],M:[c,function(e,t){e.month=t-1}],yy:[c,function(e,t){var i=new Date,n=+(""+i.getFullYear()).substr(0,2);e.year=""+(t>68?n-1:n)+t}],h:[c,function(e,t){e.hour=t}],m:[c,function(e,t){e.minute=t}],s:[c,function(e,t){e.second=t}],yyyy:[h,function(e,t){e.year=t}],S:[/\d/,function(e,t){e.millisecond=100*t}],SS:[/\d{2}/,function(e,t){e.millisecond=10*t}],SSS:[d,function(e,t){e.millisecond=t}],D:[c,p],ddd:[f,p],MMM:[f,r("monthNamesShort")],MMMM:[f,r("monthNames")],a:[f,function(e,t,i){var n=t.toLowerCase();n===i.amPm[0]?e.isPm=!1:n===i.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var i,n=(t+"").match(/([\+\-]|\d\d)/gi);n&&(i=60*n[1]+parseInt(n[2],10),e.timezoneOffset="+"===n[0]?i:-i)}]};_.DD=_.D,_.dddd=_.ddd,_.Do=_.dd=_.d,_.mm=_.m,_.hh=_.H=_.HH=_.h,_.MM=_.M,_.ss=_.s,_.A=_.a,l.masks={default:"ddd MMM dd yyyy HH:mm:ss",shortDate:"M/D/yy",mediumDate:"MMM d, yyyy",longDate:"MMMM d, yyyy",fullDate:"dddd, MMMM d, yyyy",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},l.format=function(e,t,i){var n=i||l.i18n;if("number"==typeof e&&(e=new Date(e)),"[object Date]"!==Object.prototype.toString.call(e)||isNaN(e.getTime()))throw new Error("Invalid Date in fecha.format");return t=l.masks[t]||t||l.masks.default,t.replace(u,function(t){return t in b?b[t](e,n):t.slice(1,t.length-1)})},l.parse=function(e,t,i){var n=i||l.i18n;if("string"!=typeof t)throw new Error("Invalid format in fecha.parse");if(t=l.masks[t]||t,e.length>1e3)return!1;var s=!0,a={};if(t.replace(u,function(t){if(_[t]){var i=_[t],r=e.search(i[0]);~r?e.replace(i[0],function(t){return i[1](a,t,n),e=e.substr(r+t.length),t}):s=!1}return _[t]?"":t.slice(1,t.length-1)}),!s)return!1;var r=new Date;!0===a.isPm&&null!=a.hour&&12!=+a.hour?a.hour=+a.hour+12:!1===a.isPm&&12==+a.hour&&(a.hour=0);var o;return null!=a.timezoneOffset?(a.minute=+(a.minute||0)-+a.timezoneOffset,o=new Date(Date.UTC(a.year||r.getFullYear(),a.month||0,a.day||1,a.hour||0,a.minute||0,a.second||0,a.millisecond||0))):o=new Date(a.year||r.getFullYear(),a.month||0,a.day||1,a.hour||0,a.minute||0,a.second||0,a.millisecond||0),o},void 0!==e&&e.exports?e.exports=l:void 0!==(n=function(){return l}.call(t,i,t,e))&&(e.exports=n)}()},,,,,,,function(e,t,i){var n,s;!function(a,r){n=r,void 0!==(s="function"==typeof n?n.call(t,i,t,e):n)&&(e.exports=s)}(0,function(){function e(e){return e&&"object"==typeof e&&"[object RegExp]"!==Object.prototype.toString.call(e)&&"[object Date]"!==Object.prototype.toString.call(e)}function t(e){return Array.isArray(e)?[]:{}}function i(i,n){return n&&!0===n.clone&&e(i)?a(t(i),i,n):i}function n(t,n,s){var r=t.slice();return n.forEach(function(n,o){void 0===r[o]?r[o]=i(n,s):e(n)?r[o]=a(t[o],n,s):-1===t.indexOf(n)&&r.push(i(n,s))}),r}function s(t,n,s){var r={};return e(t)&&Object.keys(t).forEach(function(e){r[e]=i(t[e],s)}),Object.keys(n).forEach(function(o){e(n[o])&&t[o]?r[o]=a(t[o],n[o],s):r[o]=i(n[o],s)}),r}function a(e,t,a){var r=Array.isArray(t),o=a||{arrayMerge:n},l=o.arrayMerge||n;return r?Array.isArray(e)?l(e,t,a):i(t,a):s(e,t,a)}return a.all=function(e,t){if(!Array.isArray(e)||e.length<2)throw new Error("first argument should be an array with at least two elements");return e.reduce(function(e,i){return a(e,i,t)})},a})},function(e,t,i){"use strict";t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=function(e){function t(e){for(var t=arguments.length,i=Array(t>1?t-1:0),r=1;r, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}},popperClass:String,prevText:String,nextText:String},data:function(){return{internalCurrentPage:1,internalPageSize:0}},render:function(e){var t=e("div",{class:"el-pagination"},[]),i=this.layout||"";if(i){var n={prev:e("prev",null,[]),jumper:e("jumper",null,[]),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount},on:{change:this.handleCurrentChange}},[]),next:e("next",null,[]),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}},[]),slot:e("my-slot",null,[]),total:e("total",null,[])},s=i.split(",").map(function(e){return e.trim()}),a=e("div",{class:"el-pagination__rightwrapper"},[]),r=!1;return this.small&&(t.data.class+=" el-pagination--small"),s.forEach(function(e){if("->"===e)return void(r=!0);r?a.children.push(n[e]):t.children.push(n[e])}),r&&t.children.unshift(a),t}},components:{MySlot:{render:function(e){return this.$parent.$slots.default?this.$parent.$slots.default[0]:""}},Prev:{render:function(e){return e("button",{attrs:{type:"button"},class:["btn-prev",{disabled:this.$parent.internalCurrentPage<=1}],on:{click:this.$parent.prev}},[this.$parent.prevText?e("span",null,[this.$parent.prevText]):e("i",{class:"el-icon el-icon-arrow-left"},[])])}},Next:{render:function(e){return e("button",{attrs:{type:"button"},class:["btn-next",{disabled:this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount}],on:{click:this.$parent.next}},[this.$parent.nextText?e("span",null,[this.$parent.nextText]):e("i",{class:"el-icon el-icon-arrow-right"},[])])}},Sizes:{mixins:[f.default],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e){Array.isArray(e)&&(this.$parent.internalPageSize=e.indexOf(this.$parent.pageSize)>-1?this.$parent.pageSize:this.pageSizes[0])}}},render:function(e){var t=this;return e("span",{class:"el-pagination__sizes"},[e("el-select",{attrs:{value:this.$parent.internalPageSize,popperClass:(this.$parent.popperClass||"")+" is-arrow-fixed"},on:{input:this.handleChange}},[this.pageSizes.map(function(i){return e("el-option",{attrs:{value:i,label:i+t.t("el.pagination.pagesize")}},[])})])])},components:{ElSelect:o.default,ElOption:u.default,ElInput:d.default},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[f.default],data:function(){return{oldValue:null}},methods:{handleFocus:function(e){this.oldValue=e.target.value},handleBlur:function(e){var t=e.target;this.reassignMaxValue(t)},handleKeyUp:function(e){var t=e.key||"",i=e.keyCode||"";(t&&"Enter"===t||i&&13===i)&&(this.reassignMaxValue(e.target),this.handleChange(e.target.value))},handleChange:function(e){this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(e),this.oldValue=null},reassignMaxValue:function(e){+e.value>this.$parent.internalPageCount&&(e.value=this.$parent.internalPageCount)}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("el-input",{class:"el-pagination__editor is-in-pagination",attrs:{min:1,max:this.$parent.internalPageCount,value:this.$parent.internalCurrentPage,type:"number"},domProps:{value:this.$parent.internalCurrentPage},on:{input:this.handleChange,focus:this.handleFocus,blur:this.handleBlur},nativeOn:{keyup:this.handleKeyUp}},[]),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[f.default],render:function(e){return"number"==typeof this.$parent.total?e("span",{class:"el-pagination__total"},[this.t("el.pagination.total",{total:this.$parent.total})]):""}},Pager:a.default},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)},prev:function(){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e)},next:function(){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e)},getValidCurrentPage:function(e){e=parseInt(e,10);var t="number"==typeof this.internalPageCount,i=void 0;return t?e<1?i=1:e>this.internalPageCount&&(i=this.internalPageCount):(isNaN(e)||e<1)&&(i=1),void 0===i&&isNaN(e)?i=1:0===i&&(i=1),void 0===i?e:i}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.ceil(this.total/this.internalPageSize):"number"==typeof this.pageCount?this.pageCount:null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=e}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=e}},internalCurrentPage:function(e,t){var i=this;e=parseInt(e,10),e=isNaN(e)?t||1:this.getValidCurrentPage(e),void 0!==e?this.$nextTick(function(){i.internalCurrentPage=e,t!==e&&(i.$emit("update:currentPage",e),i.$emit("current-change",i.internalCurrentPage))}):(this.$emit("update:currentPage",e),this.$emit("current-change",this.internalCurrentPage))},internalPageCount:function(e){var t=this.internalCurrentPage;e>0&&0===t?this.internalCurrentPage=1:t>e&&(this.internalCurrentPage=0===e?1:e)}}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(91),s=i.n(n),a=i(92),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElPager",props:{currentPage:Number,pageCount:Number},watch:{showPrevMore:function(e){e||(this.quickprevIconClass="el-icon-more")},showNextMore:function(e){e||(this.quicknextIconClass="el-icon-more")}},methods:{onPagerClick:function(e){var t=e.target;if("UL"!==t.tagName){var i=Number(e.target.textContent),n=this.pageCount,s=this.currentPage;-1!==t.className.indexOf("more")&&(-1!==t.className.indexOf("quickprev")?i=s-5:-1!==t.className.indexOf("quicknext")&&(i=s+5)),isNaN(i)||(i<1&&(i=1),i>n&&(i=n)),i!==s&&this.$emit("change",i)}}},computed:{pagers:function(){var e=Number(this.currentPage),t=Number(this.pageCount),i=!1,n=!1;t>7&&(e>4&&(i=!0),e0?i("li",{staticClass:"number",class:{active:1===e.currentPage}},[e._v("1")]):e._e(),e.showPrevMore?i("li",{staticClass:"el-icon more btn-quickprev",class:[e.quickprevIconClass],on:{mouseenter:function(t){e.quickprevIconClass="el-icon-d-arrow-left"},mouseleave:function(t){e.quickprevIconClass="el-icon-more"}}}):e._e(),e._l(e.pagers,function(t){return i("li",{staticClass:"number",class:{active:e.currentPage===t}},[e._v(e._s(t))])}),e.showNextMore?i("li",{staticClass:"el-icon more btn-quicknext",class:[e.quicknextIconClass],on:{mouseenter:function(t){e.quicknextIconClass="el-icon-d-arrow-right"},mouseleave:function(t){e.quicknextIconClass="el-icon-more"}}}):e._e(),e.pageCount>1?i("li",{staticClass:"number",class:{active:e.currentPage===e.pageCount}},[e._v(e._s(e.pageCount))]):e._e()],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(94),s=i.n(n),a=i(113),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i(1),r=n(a),o=i(22),l=n(o),u=i(5),c=n(u),d=i(7),h=n(d),f=i(99),p=n(f),m=i(52),v=n(m),g=i(27),y=n(g),b=i(23),_=n(b),C=i(13),x=n(C),w=i(16),k=n(w),S=i(4),M=i(24),$=i(12),D=i(35),E=n(D),T=i(9),P=i(112),O=n(P),N={medium:36,small:32,mini:28},F=function(e,t){if(e===t)return!0;if(!(e instanceof Array))return!1;if(!(t instanceof Array))return!1;if(e.length!==t.length)return!1;for(var i=0;i!==e.length;++i)if(e[i]!==t[i])return!1;return!0};t.default={mixins:[r.default,c.default,(0,l.default)("reference"),O.default],name:"ElSelect",componentName:"ElSelect",inject:{elFormItem:{default:""}},provide:function(){return{select:this}},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},iconClass:function(){return this.clearable&&!this.disabled&&this.inputHovering&&!this.multiple&&void 0!==this.value&&""!==this.value?"circle-close is-show-close":this.remote&&this.filterable?"":"arrow-up"},debounce:function(){return this.remote?300:0},emptyText:function(){return this.loading?this.loadingText||this.t("el.select.loading"):(!this.remote||""!==this.query||0!==this.options.length)&&(this.filterable&&this.options.length>0&&0===this.filteredOptionsCount?this.noMatchText||this.t("el.select.noMatch"):0===this.options.length?this.noDataText||this.t("el.select.noData"):null)},showNewOption:function(){var e=this,t=this.options.filter(function(e){return!e.created}).some(function(t){return t.currentLabel===e.query});return this.filterable&&this.allowCreate&&""!==this.query&&!t},selectSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},components:{ElInput:h.default,ElSelectMenu:p.default,ElOption:v.default,ElTag:y.default,ElScrollbar:_.default},directives:{Clickoutside:k.default},props:{name:String,value:{required:!0},size:String,disabled:Boolean,clearable:Boolean,filterable:Boolean,allowCreate:Boolean,loading:Boolean,popperClass:String,remote:Boolean,loadingText:String,noMatchText:String,noDataText:String,remoteMethod:Function,filterMethod:Function,multiple:Boolean,multipleLimit:{type:Number,default:0},placeholder:{type:String,default:function(){return(0,$.t)("el.select.placeholder")}},defaultFirstOption:Boolean,valueKey:{type:String,default:"value"}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},inputLength:20,inputWidth:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,visible:!1,selectedLabel:"",hoverIndex:-1,query:"",previousQuery:"",inputHovering:!1,currentPlaceholder:""}},watch:{placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e){this.multiple&&(this.resetInputHeight(),e.length>0||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20)},visible:function(e){var t=this;e?(this.handleIconShow(),this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.remote?"":this.selectedLabel,this.handleQueryChange(this.query),this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.$refs.reference.$el.querySelector("input").blur(),this.handleIconHide(),this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.selectedLabel="",this.inputLength=20,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdOption?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel))),this.$emit("visible-change",e)},options:function(){if(!this.$isServer){this.multiple&&this.resetInputHeight();var e=this.$el.querySelectorAll("input");-1===[].indexOf.call(e,document.activeElement)&&this.setSelected(),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption()}}},methods:{handleQueryChange:function(e){var t=this;this.previousQuery!==e&&(this.previousQuery=e,this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable&&(this.inputLength=15*this.$refs.input.value.length+20,this.managePlaceholder(),this.resetInputHeight()),this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e)):"function"==typeof this.filterMethod?(this.filterMethod(e),this.broadcast("ElOptionGroup","queryChange")):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e),this.broadcast("ElOptionGroup","queryChange")),this.defaultFirstOption&&(this.filterable||this.remote)&&this.filteredOptionsCount&&this.checkDefaultFirstOption())},handleIconHide:function(){var e=this.$el.querySelector(".el-input__icon");e&&(0,S.removeClass)(e,"is-reverse")},handleIconShow:function(){var e=this.$el.querySelector(".el-input__icon");e&&!(0,S.hasClass)(e,"el-icon-circle-close")&&(0,S.addClass)(e,"is-reverse")},scrollToOption:function(e){var t=Array.isArray(e)&&e[0]?e[0].$el:e.$el;if(this.$refs.popper&&t){var i=this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap");(0,E.default)(i,t)}},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.scrollToOption(e.selected)})},emitChange:function(e){F(this.value,e)||(this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e))},getOption:function(e){for(var t=void 0,i="[object object]"===Object.prototype.toString.call(e).toLowerCase(),n=this.cachedOptions.length-1;n>=0;n--){var s=this.cachedOptions[n];if(i?(0,T.getValueByPath)(s.value,this.valueKey)===(0,T.getValueByPath)(e,this.valueKey):s.value===e){t=s;break}}if(t)return t;var a=i?"":e,r={value:e,currentLabel:a};return this.multiple&&(r.hitState=!1),r},setSelected:function(){var e=this;if(!this.multiple){var t=this.getOption(this.value);return t.created?(this.createdLabel=t.currentLabel,this.createdSelected=!0):this.createdSelected=!1,this.selectedLabel=t.currentLabel,this.selected=t,void(this.filterable&&(this.query=this.selectedLabel))}var i=[];Array.isArray(this.value)&&this.value.forEach(function(t){i.push(e.getOption(t))}),this.selected=i,this.$nextTick(function(){e.resetInputHeight()})},handleFocus:function(e){this.visible=!0,this.$emit("focus",e)},handleBlur:function(e){this.$emit("blur",e)},handleIconClick:function(e){this.iconClass.indexOf("circle-close")>-1?this.deleteSelected(e):this.toggleMenu()},handleMouseDown:function(e){"INPUT"===e.target.tagName&&this.visible&&(this.handleClose(),e.preventDefault())},doDestroy:function(){this.$refs.popper&&this.$refs.popper.doDestroy()},handleClose:function(){this.visible=!1},toggleLastOptionHitState:function(e){if(Array.isArray(this.selected)){var t=this.selected[this.selected.length-1];if(t)return!0===e||!1===e?(t.hitState=e,e):(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){if(e.target.value.length<=0&&!this.toggleLastOptionHitState()){var t=this.value.slice();t.pop(),this.$emit("input",t),this.emitChange(t)}},managePlaceholder:function(){""!==this.currentPlaceholder&&(this.currentPlaceholder=this.$refs.input.value?"":this.cachedPlaceHolder)},resetInputState:function(e){8!==e.keyCode&&this.toggleLastOptionHitState(!1),this.inputLength=15*this.$refs.input.value.length+20,this.resetInputHeight()},resetInputHeight:function(){var e=this;this.$nextTick(function(){if(e.$refs.reference){var t=e.$refs.reference.$el.childNodes;[].filter.call(t,function(e){return"INPUT"===e.tagName})[0].style.height=Math.max(e.$refs.tags.clientHeight+10,N[e.size]||40)+"px",e.visible&&!1!==e.emptyText&&e.broadcast("ElSelectDropdown","updatePopper")}})},resetHoverIndex:function(){var e=this;setTimeout(function(){e.multiple?e.selected.length>0?e.hoverIndex=Math.min.apply(null,e.selected.map(function(t){return e.options.indexOf(t)})):e.hoverIndex=-1:e.hoverIndex=e.options.indexOf(e.selected)},300)},handleOptionSelect:function(e){var t=this;if(this.multiple){var i=this.value.slice(),n=this.getValueIndex(i,e.value);n>-1?i.splice(n,1):(this.multipleLimit<=0||i.length0&&void 0!==arguments[0]?arguments[0]:[],i=arguments[1];if("[object object]"!==Object.prototype.toString.call(i).toLowerCase())return t.indexOf(i);var n=function(){var n=e.valueKey,s=-1;return t.some(function(e,t){return(0,T.getValueByPath)(e,n)===(0,T.getValueByPath)(i,n)&&(s=t,!0)}),{v:s}}();return"object"===(void 0===n?"undefined":s(n))?n.v:void 0},toggleMenu:function(){this.disabled||(this.visible=!this.visible,this.visible&&(this.$refs.input||this.$refs.reference).focus())},selectOption:function(){this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex])},deleteSelected:function(e){e.stopPropagation(),this.$emit("input",""),this.emitChange(""),this.visible=!1,this.$emit("clear")},deleteTag:function(e,t){var i=this.selected.indexOf(t);if(i>-1&&!this.disabled){var n=this.value.slice();n.splice(i,1),this.$emit("input",n),this.emitChange(n),this.$emit("remove-tag",t)}e.stopPropagation()},onInputChange:function(){this.filterable&&this.query!==this.selectedLabel&&(this.query=this.selectedLabel,this.handleQueryChange(this.query))},onOptionDestroy:function(e){e>-1&&(this.optionsCount--,this.filteredOptionsCount--,this.options.splice(e,1))},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()},checkDefaultFirstOption:function(){this.hoverIndex=-1;for(var e=0;e!==this.options.length;++e){var t=this.options[e];if(this.query){if(!t.disabled&&!t.groupDisabled&&t.visible){this.hoverIndex=e;break}}else if(t.itemSelected){this.hoverIndex=e;break}}},getValueKey:function(e){return"[object object]"!==Object.prototype.toString.call(e.value).toLowerCase()?e.value:(0,T.getValueByPath)(e.value,this.valueKey)}},created:function(){var e=this;this.cachedPlaceHolder=this.currentPlaceholder=this.placeholder,this.multiple&&!Array.isArray(this.value)&&this.$emit("input",[]),!this.multiple&&Array.isArray(this.value)&&this.$emit("input",""),this.debouncedOnInputChange=(0,x.default)(this.debounce,function(){e.onInputChange()}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&this.value.length>0&&(this.currentPlaceholder=""),(0,M.addResizeListener)(this.$el,this.handleResize),this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){e.$refs.reference&&e.$refs.reference.$el&&(e.inputWidth=e.$refs.reference.$el.getBoundingClientRect().width)}),this.setSelected()},beforeDestroy:function(){this.$el&&this.handleResize&&(0,M.removeResizeListener)(this.$el,this.handleResize)}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(96),s=i.n(n),a=i(98),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(1),a=n(s),r=i(22),o=n(r),l=i(97),u=n(l),c=i(15),d=n(c);t.default={name:"ElInput",componentName:"ElInput",mixins:[a.default,(0,o.default)("input")],inject:{elFormItem:{default:""}},data:function(){return{currentValue:this.value,textareaCalcStyle:{},prefixOffset:null,suffixOffset:null}},props:{value:[String,Number],placeholder:String,size:String,resize:String,readonly:Boolean,autofocus:Boolean,icon:String,disabled:Boolean,type:{type:String,default:"text"},name:String,autosize:{type:[Boolean,Object],default:!1},rows:{type:Number,default:2},autoComplete:{type:String,default:"off"},form:String,maxlength:Number,minlength:Number,max:{},min:{},step:{},validateEvent:{type:Boolean,default:!0},onIconClick:Function,suffixIcon:String,prefixIcon:String,label:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},validateState:function(){return this.elFormItem?this.elFormItem.validateState:""},validateIcon:function(){return{validating:"el-icon-loading",success:"el-icon-circle-check",error:"el-icon-circle-cross"}[this.validateState]},textareaStyle:function(){return(0,d.default)({},this.textareaCalcStyle,{resize:this.resize})},inputSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size},isGroup:function(){return this.$slots.prepend||this.$slots.append}},watch:{value:function(e,t){this.setCurrentValue(e)}},methods:{handleBlur:function(e){this.$emit("blur",e),this.validateEvent&&this.dispatch("ElFormItem","el.form.blur",[this.currentValue])},inputSelect:function(){this.$refs.input.select()},resizeTextarea:function(){if(!this.$isServer){var e=this.autosize,t=this.type;if(e&&"textarea"===t){var i=e.minRows,n=e.maxRows;this.textareaCalcStyle=(0,u.default)(this.$refs.textarea,i,n)}}},handleFocus:function(e){this.$emit("focus",e)},handleInput:function(e){var t=e.target.value;this.$emit("input",t),this.setCurrentValue(t)},handleChange:function(e){this.$emit("change",e.target.value)},setCurrentValue:function(e){var t=this;e!==this.currentValue&&(this.$nextTick(function(e){t.resizeTextarea()}),this.currentValue=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[e]))},calcIconOffset:function(e){var t={suf:"append",pre:"prepend"},i=t[e];if(this.$slots[i])return{transform:"translateX("+("suf"===e?"-":"")+this.$el.querySelector(".el-input-group__"+i).offsetWidth+"px)"}}},created:function(){this.$on("inputSelect",this.inputSelect)},mounted:function(){this.resizeTextarea(),this.isGroup&&(this.prefixOffset=this.calcIconOffset("pre"),this.suffixOffset=this.calcIconOffset("suf"))}}},function(e,t,i){"use strict";function n(e){var t=window.getComputedStyle(e),i=t.getPropertyValue("box-sizing"),n=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),s=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width"));return{contextStyle:o.map(function(e){return e+":"+t.getPropertyValue(e)}).join(";"),paddingSize:n,borderSize:s,boxSizing:i}}function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;a||(a=document.createElement("textarea"),document.body.appendChild(a));var s=n(e),o=s.paddingSize,l=s.borderSize,u=s.boxSizing,c=s.contextStyle;a.setAttribute("style",c+";"+r),a.value=e.value||e.placeholder||"";var d=a.scrollHeight;"border-box"===u?d+=l:"content-box"===u&&(d-=o),a.value="";var h=a.scrollHeight-o;if(null!==t){var f=h*t;"border-box"===u&&(f=f+o+l),d=Math.max(f,d)}if(null!==i){var p=h*i;"border-box"===u&&(p=p+o+l),d=Math.min(p,d)}return a.parentNode&&a.parentNode.removeChild(a),a=null,{height:d+"px"}}t.__esModule=!0,t.default=s;var a=void 0,r="\n height:0 !important;\n visibility:hidden !important;\n overflow:hidden !important;\n position:absolute !important;\n z-index:-1000 !important;\n top:0 !important;\n right:0 !important\n",o=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"]},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{class:["textarea"===e.type?"el-textarea":"el-input",e.inputSize?"el-input--"+e.inputSize:"",{"is-disabled":e.disabled,"el-input-group":e.$slots.prepend||e.$slots.append,"el-input-group--append":e.$slots.append,"el-input-group--prepend":e.$slots.prepend,"el-input--prefix":e.$slots.prefix||e.prefixIcon,"el-input--suffix":e.$slots.suffix||e.suffixIcon}]},["textarea"!==e.type?[e.$slots.prepend?i("div",{staticClass:"el-input-group__prepend",attrs:{tabindex:"0"}},[e._t("prepend")],2):e._e(),"textarea"!==e.type?i("input",e._b({ref:"input",staticClass:"el-input__inner",attrs:{autocomplete:e.autoComplete,"aria-label":e.label},domProps:{value:e.currentValue},on:{input:e.handleInput,focus:e.handleFocus,blur:e.handleBlur,change:e.handleChange}},"input",e.$props,!1)):e._e(),e.$slots.prefix||e.prefixIcon?i("span",{staticClass:"el-input__prefix",style:e.prefixOffset},[e._t("prefix"),e.prefixIcon?i("i",{staticClass:"el-input__icon",class:e.prefixIcon}):e._e()],2):e._e(),e.$slots.suffix||e.suffixIcon||e.validateState?i("span",{staticClass:"el-input__suffix",style:e.suffixOffset},[i("span",{staticClass:"el-input__suffix-inner"},[e._t("suffix"),e.suffixIcon?i("i",{staticClass:"el-input__icon",class:e.suffixIcon}):e._e()],2),e.validateState?i("i",{staticClass:"el-input__icon",class:["el-input__validateIcon",e.validateIcon]}):e._e()]):e._e(),e.$slots.append?i("div",{staticClass:"el-input-group__append"},[e._t("append")],2):e._e()]:i("textarea",e._b({ref:"textarea",staticClass:"el-textarea__inner",style:e.textareaStyle,domProps:{value:e.currentValue},on:{input:e.handleInput,focus:e.handleFocus,blur:e.handleBlur,change:e.handleChange}},"textarea",e.$props,!1),[e._v(' :aria-label="label"\n >\n ')])],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(100),s=i.n(n),a=i(103),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(10),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[s.default],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{gpuAcceleration:!1}}},visibleArrow:{default:!0}},data:function(){return{minWidth:""}},computed:{popperClass:function(){return this.$parent.popperClass}},watch:{"$parent.inputWidth":function(){this.minWidth=this.$parent.$el.getBoundingClientRect().width+"px"}},mounted:function(){var e=this;this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",function(){e.$parent.visible&&e.updatePopper()}),this.$on("destroyPopper",this.destroyPopper)}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(2),s=function(e){return e&&e.__esModule?e:{default:e}}(n),a=i(4),r=!1,o=function(){if(!s.default.prototype.$isServer){var e=u.modalDom;return e?r=!0:(r=!1,e=document.createElement("div"),u.modalDom=e,e.addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){u.doOnModalClick&&u.doOnModalClick()})),e}},l={},u={zIndex:2e3,modalFade:!0,getInstance:function(e){return l[e]},register:function(e,t){e&&t&&(l[e]=t)},deregister:function(e){e&&(l[e]=null,delete l[e])},nextZIndex:function(){return u.zIndex++},modalStack:[],doOnModalClick:function(){var e=u.modalStack[u.modalStack.length-1];if(e){var t=u.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,i,n,l){if(!s.default.prototype.$isServer&&e&&void 0!==t){this.modalFade=l;for(var u=this.modalStack,c=0,d=u.length;c0){var n=t[t.length-1];if(n.id===e){if(n.modalClass){n.modalClass.trim().split(/\s+/).forEach(function(e){return(0,a.removeClass)(i,e)})}t.pop(),t.length>0&&(i.style.zIndex=t[t.length-1].zIndex)}else for(var s=t.length-1;s>=0;s--)if(t[s].id===e){t.splice(s,1);break}}0===t.length&&(this.modalFade&&(0,a.addClass)(i,"v-modal-leave"),setTimeout(function(){0===t.length&&(i.parentNode&&i.parentNode.removeChild(i),i.style.display="none",u.modalDom=void 0),(0,a.removeClass)(i,"v-modal-leave")},200))}},c=function(){if(!s.default.prototype.$isServer&&u.modalStack.length>0){var e=u.modalStack[u.modalStack.length-1];if(!e)return;return u.getInstance(e.id)}};s.default.prototype.$isServer||window.addEventListener("keydown",function(e){if(27===e.keyCode){var t=c();t&&t.closeOnPressEscape&&(t.handleClose?t.handleClose():t.handleAction?t.handleAction("cancel"):t.close())}}),t.default=u},function(e,t,i){"use strict";var n,s;"function"==typeof Symbol&&Symbol.iterator;!function(a,r){n=r,void 0!==(s="function"==typeof n?n.call(t,i,t,e):n)&&(e.exports=s)}(0,function(){function e(e,t,i){this._reference=e.jquery?e[0]:e,this.state={};var n=void 0===t||null===t,s=t&&"[object Object]"===Object.prototype.toString.call(t);return this._popper=n||s?this.parse(s?t:{}):t.jquery?t[0]:t,this._options=Object.assign({},v,i),this._options.modifiers=this._options.modifiers.map(function(e){if(-1===this._options.modifiersIgnored.indexOf(e))return"applyStyle"===e&&this._popper.setAttribute("x-placement",this._options.placement),this.modifiers[e]||e}.bind(this)),this.state.position=this._getPosition(this._popper,this._reference),u(this._popper,{position:this.state.position,top:0}),this.update(),this._setupEventListeners(),this}function t(e){var t=e.style.display,i=e.style.visibility;e.style.display="block",e.style.visibility="hidden";var n=(e.offsetWidth,m.getComputedStyle(e)),s=parseFloat(n.marginTop)+parseFloat(n.marginBottom),a=parseFloat(n.marginLeft)+parseFloat(n.marginRight),r={width:e.offsetWidth+a,height:e.offsetHeight+s};return e.style.display=t,e.style.visibility=i,r}function i(e){var t={left:"right",right:"left",bottom:"top",top:"bottom"};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function n(e){var t=Object.assign({},e);return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function s(e,t){var i,n=0;for(i in e){if(e[i]===t)return n;n++}return null}function a(e,t){return m.getComputedStyle(e,null)[t]}function r(e){var t=e.offsetParent;return t!==m.document.body&&t?t:m.document.documentElement}function o(e){var t=e.parentNode;return t?t===m.document?m.document.body.scrollTop?m.document.body:m.document.documentElement:-1!==["scroll","auto"].indexOf(a(t,"overflow"))||-1!==["scroll","auto"].indexOf(a(t,"overflow-x"))||-1!==["scroll","auto"].indexOf(a(t,"overflow-y"))?t:o(e.parentNode):e}function l(e){return e!==m.document.body&&("fixed"===a(e,"position")||(e.parentNode?l(e.parentNode):e))}function u(e,t){function i(e){return""!==e&&!isNaN(parseFloat(e))&&isFinite(e)}Object.keys(t).forEach(function(n){var s="";-1!==["width","height","top","right","bottom","left"].indexOf(n)&&i(t[n])&&(s="px"),e.style[n]=t[n]+s})}function c(e){var t={};return e&&"[object Function]"===t.toString.call(e)}function d(e){var t={width:e.offsetWidth,height:e.offsetHeight,left:e.offsetLeft,top:e.offsetTop};return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function h(e){var t=e.getBoundingClientRect(),i=-1!=navigator.userAgent.indexOf("MSIE"),n=i&&"HTML"===e.tagName?-e.scrollTop:t.top;return{left:t.left,top:n,right:t.right,bottom:t.bottom,width:t.right-t.left,height:t.bottom-n}}function f(e,t,i){var n=h(e),s=h(t);if(i){var a=o(t);s.top+=a.scrollTop,s.bottom+=a.scrollTop,s.left+=a.scrollLeft,s.right+=a.scrollLeft}return{top:n.top-s.top,left:n.left-s.left,bottom:n.top-s.top+n.height,right:n.left-s.left+n.width,width:n.width,height:n.height}}function p(e){for(var t=["","ms","webkit","moz","o"],i=0;i1&&console.warn("WARNING: the given `parent` query("+e.parent+") matched more than one element, the first one will be used"),0===o.length)throw"ERROR: the given `parent` doesn't exists!";o=o[0]}return o.length>1&&o instanceof Element==!1&&(console.warn("WARNING: you have passed as parent a list of elements, the first one will be used"),o=o[0]),o.appendChild(a),a},e.prototype._getPosition=function(e,t){var i=r(t);return this._options.forceAbsolute?"absolute":l(t,i)?"fixed":"absolute"},e.prototype._getOffsets=function(e,i,n){n=n.split("-")[0];var s={};s.position=this.state.position;var a="fixed"===s.position,o=f(i,r(e),a),l=t(e);return-1!==["right","left"].indexOf(n)?(s.top=o.top+o.height/2-l.height/2,s.left="left"===n?o.left-l.width:o.right):(s.left=o.left+o.width/2-l.width/2,s.top="top"===n?o.top-l.height:o.bottom),s.width=l.width,s.height=l.height,{popper:s,reference:o}},e.prototype._setupEventListeners=function(){if(this.state.updateBound=this.update.bind(this),m.addEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=o(this._reference);e!==m.document.body&&e!==m.document.documentElement||(e=m),e.addEventListener("scroll",this.state.updateBound)}},e.prototype._removeEventListeners=function(){if(m.removeEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=o(this._reference);e!==m.document.body&&e!==m.document.documentElement||(e=m),e.removeEventListener("scroll",this.state.updateBound)}this.state.updateBound=null},e.prototype._getBoundaries=function(e,t,i){var n,s,a={};if("window"===i){var l=m.document.body,u=m.document.documentElement;s=Math.max(l.scrollHeight,l.offsetHeight,u.clientHeight,u.scrollHeight,u.offsetHeight),n=Math.max(l.scrollWidth,l.offsetWidth,u.clientWidth,u.scrollWidth,u.offsetWidth),a={top:0,right:n,bottom:s,left:0}}else if("viewport"===i){var c=r(this._popper),h=o(this._popper),f=d(c),p="fixed"===e.offsets.popper.position?0:function(e){return e==document.body?Math.max(document.documentElement.scrollTop,document.body.scrollTop):e.scrollTop}(h),v="fixed"===e.offsets.popper.position?0:function(e){return e==document.body?Math.max(document.documentElement.scrollLeft,document.body.scrollLeft):e.scrollLeft}(h);a={top:0-(f.top-p),right:m.document.documentElement.clientWidth-(f.left-v),bottom:m.document.documentElement.clientHeight-(f.top-p),left:0-(f.left-v)}}else a=r(this._popper)===i?{top:0,left:0,right:i.clientWidth,bottom:i.clientHeight}:d(i);return a.left+=t,a.right-=t,a.top=a.top+t,a.bottom=a.bottom-t,a},e.prototype.runModifiers=function(e,t,i){var n=t.slice();return void 0!==i&&(n=this._options.modifiers.slice(0,s(this._options.modifiers,i))),n.forEach(function(t){c(t)&&(e=t.call(this,e))}.bind(this)),e},e.prototype.isModifierRequired=function(e,t){var i=s(this._options.modifiers,e);return!!this._options.modifiers.slice(0,i).filter(function(e){return e===t}).length},e.prototype.modifiers={},e.prototype.modifiers.applyStyle=function(e){var t,i={position:e.offsets.popper.position},n=Math.round(e.offsets.popper.left),s=Math.round(e.offsets.popper.top);return this._options.gpuAcceleration&&(t=p("transform"))?(i[t]="translate3d("+n+"px, "+s+"px, 0)",i.top=0,i.left=0):(i.left=n,i.top=s),Object.assign(i,e.styles),u(this._popper,i),this._popper.setAttribute("x-placement",e.placement),this.isModifierRequired(this.modifiers.applyStyle,this.modifiers.arrow)&&e.offsets.arrow&&u(e.arrowElement,e.offsets.arrow),e},e.prototype.modifiers.shift=function(e){var t=e.placement,i=t.split("-")[0],s=t.split("-")[1];if(s){var a=e.offsets.reference,r=n(e.offsets.popper),o={y:{start:{top:a.top},end:{top:a.top+a.height-r.height}},x:{start:{left:a.left},end:{left:a.left+a.width-r.width}}},l=-1!==["bottom","top"].indexOf(i)?"x":"y";e.offsets.popper=Object.assign(r,o[l][s])}return e},e.prototype.modifiers.preventOverflow=function(e){var t=this._options.preventOverflowOrder,i=n(e.offsets.popper),s={left:function(){var t=i.left;return i.lefte.boundaries.right&&(t=Math.min(i.left,e.boundaries.right-i.width)),{left:t}},top:function(){var t=i.top;return i.tope.boundaries.bottom&&(t=Math.min(i.top,e.boundaries.bottom-i.height)),{top:t}}};return t.forEach(function(t){e.offsets.popper=Object.assign(i,s[t]())}),e},e.prototype.modifiers.keepTogether=function(e){var t=n(e.offsets.popper),i=e.offsets.reference,s=Math.floor;return t.rights(i.right)&&(e.offsets.popper.left=s(i.right)),t.bottoms(i.bottom)&&(e.offsets.popper.top=s(i.bottom)),e},e.prototype.modifiers.flip=function(e){if(!this.isModifierRequired(this.modifiers.flip,this.modifiers.preventOverflow))return console.warn("WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!"),e;if(e.flipped&&e.placement===e._originalPlacement)return e;var t=e.placement.split("-")[0],s=i(t),a=e.placement.split("-")[1]||"",r=[];return r="flip"===this._options.flipBehavior?[t,s]:this._options.flipBehavior,r.forEach(function(o,l){if(t===o&&r.length!==l+1){t=e.placement.split("-")[0],s=i(t);var u=n(e.offsets.popper),c=-1!==["right","bottom"].indexOf(t);(c&&Math.floor(e.offsets.reference[t])>Math.floor(u[s])||!c&&Math.floor(e.offsets.reference[t])r[h]&&(e.offsets.popper[c]+=o[c]+f-r[h]);var p=o[c]+o[u]/2-f/2,m=p-r[c];return m=Math.max(Math.min(r[u]-f-3,m),3),s[c]=m,s[d]="",e.offsets.arrow=s,e.arrowElement=i,e},Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e){if(void 0===e||null===e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),i=1;i=this.select.multipleLimit&&this.select.multipleLimit>0)}},watch:{currentLabel:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")},value:function(){this.created||this.select.remote||this.dispatch("ElSelect","setSelected")}},methods:{isEqual:function(e,t){if(this.isObject){var i=this.select.valueKey;return(0,r.getValueByPath)(e,i)===(0,r.getValueByPath)(t,i)}return e===t},contains:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],i=arguments[1];if(!this.isObject)return t.indexOf(i)>-1;var s=function(){var n=e.select.valueKey;return{v:t.some(function(e){return(0,r.getValueByPath)(e,n)===(0,r.getValueByPath)(i,n)})}}();return"object"===(void 0===s?"undefined":n(s))?s.v:void 0},handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.select.hoverIndex=this.select.options.indexOf(this))},selectOptionClick:function(){!0!==this.disabled&&!0!==this.groupDisabled&&this.dispatch("ElSelect","handleOptionClick",this)},queryChange:function(e){var t=String(e).replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g,"\\$1");this.visible=new RegExp(t,"i").test(this.currentLabel)||this.created,this.visible||this.select.filteredOptionsCount--}},created:function(){this.select.options.push(this),this.select.cachedOptions.push(this),this.select.optionsCount++,this.select.filteredOptionsCount++,this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled)},beforeDestroy:function(){this.select.onOptionDestroy(this.select.options.indexOf(this))}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-dropdown__item",class:{selected:e.itemSelected,"is-disabled":e.disabled||e.groupDisabled||e.limitReached,hover:e.hover},on:{mouseenter:e.hoverItem,click:function(t){t.stopPropagation(),e.selectOptionClick(t)}}},[e._t("default",[i("span",[e._v(e._s(e.currentLabel))])])],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(107),s=i.n(n),a=i(108),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,disableTransitions:Boolean,color:String,size:String},methods:{handleClose:function(e){this.$emit("close",e)}},computed:{tagSize:function(){return this.size||(this.$ELEMENT||{}).size}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:e.disableTransitions?"":"el-zoom-in-center"}},[i("span",{staticClass:"el-tag",class:[e.type?"el-tag--"+e.type:"",e.tagSize&&"el-tag--"+e.tagSize,{"is-hit":e.hit}],style:{backgroundColor:e.color}},[e._t("default"),e.closable?i("i",{staticClass:"el-tag__close el-icon-close",on:{click:e.handleClose}}):e._e()],2)])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(24),a=i(34),r=n(a),o=i(9),l=i(110),u=n(l);t.default={name:"ElScrollbar",components:{Bar:u.default},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(e){var t=(0,r.default)(),i=this.wrapStyle;if(t){var n="-"+t+"px",s="margin-bottom: "+n+"; margin-right: "+n+";";Array.isArray(this.wrapStyle)?(i=(0,o.toObject)(this.wrapStyle),i.marginRight=i.marginBottom=n):"string"==typeof this.wrapStyle?i+=s:i=s}var a=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),l=e("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[a]]),c=void 0;return c=this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[a]])]:[l,e(u.default,{attrs:{move:this.moveX,size:this.sizeWidth}},[]),e(u.default,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}},[])],e("div",{class:"el-scrollbar"},c)},methods:{handleScroll:function(){var e=this.wrap;this.moveY=100*e.scrollTop/e.clientHeight,this.moveX=100*e.scrollLeft/e.clientWidth},update:function(){var e=void 0,t=void 0,i=this.wrap;i&&(e=100*i.clientHeight/i.scrollHeight,t=100*i.clientWidth/i.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&(0,s.addResizeListener)(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&(0,s.removeResizeListener)(this.$refs.resize,this.update)}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(4),s=i(111);t.default={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return s.BAR_MAP[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t=this.size,i=this.move,n=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+n.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:(0,s.renderThumbStyle)({size:t,move:i,bar:n})},[])])},methods:{clickThumbHandler:function(e){this.startDrag(e),this[this.bar.axis]=e.currentTarget[this.bar.offset]-(e[this.bar.client]-e.currentTarget.getBoundingClientRect()[this.bar.direction])},clickTrackHandler:function(e){var t=Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client]),i=this.$refs.thumb[this.bar.offset]/2,n=100*(t-i)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=n*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,(0,n.on)(document,"mousemove",this.mouseMoveDocumentHandler),(0,n.on)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(!1!==this.cursorDown){var t=this[this.bar.axis];if(t){var i=-1*(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client]),n=this.$refs.thumb[this.bar.offset]-t,s=100*(i-n)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=s*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,(0,n.off)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){(0,n.off)(document,"mouseup",this.mouseUpDocumentHandler)}}},function(e,t,i){"use strict";function n(e){var t=e.move,i=e.size,n=e.bar,s={},a="translate"+n.axis+"("+t+"%)";return s[n.size]=i,s.transform=a,s.msTransform=a,s.webkitTransform=a,s}t.__esModule=!0,t.renderThumbStyle=n;t.BAR_MAP={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}}},function(e,t,i){"use strict";t.__esModule=!0,t.default={data:function(){return{hoverOption:-1}},computed:{optionsAllDisabled:function(){return this.options.length===this.options.filter(function(e){return!0===e.disabled}).length}},watch:{hoverIndex:function(e){var t=this;"number"==typeof e&&e>-1&&(this.hoverOption=this.options[e]||{}),this.options.forEach(function(e){e.hover=t.hoverOption===e})}},methods:{navigateOptions:function(e){var t=this;if(!this.visible)return void(this.visible=!0);if(0!==this.options.length&&0!==this.filteredOptionsCount){if(!this.optionsAllDisabled){"next"===e?++this.hoverIndex===this.options.length&&(this.hoverIndex=0):"prev"===e&&--this.hoverIndex<0&&(this.hoverIndex=this.options.length-1);var i=this.options[this.hoverIndex];!0!==i.disabled&&!0!==i.groupDisabled&&i.visible||this.navigateOptions(e)}this.$nextTick(function(){return t.scrollToOption(t.hoverOption)})}}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],staticClass:"el-select",class:[e.selectSize?"el-select--"+e.selectSize:""]},[e.multiple?i("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":e.inputWidth-32+"px"},on:{click:function(t){t.stopPropagation(),e.toggleMenu(t)}}},[i("transition-group",{on:{"after-leave":e.resetInputHeight}},e._l(e.selected,function(t){return i("el-tag",{key:e.getValueKey(t),attrs:{closable:!e.disabled,size:"small",hit:t.hitState,type:"info","close-transition":""},on:{close:function(i){e.deleteTag(i,t)}}},[i("span",{staticClass:"el-select__tags-text"},[e._v(e._s(t.currentLabel))])])})),e.filterable?i("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:"is-"+e.size,style:{width:e.inputLength+"px","max-width":e.inputWidth-42+"px"},attrs:{type:"text",disabled:e.disabled,debounce:e.remote?300:0},domProps:{value:e.query},on:{focus:function(t){e.visible=!0},keyup:e.managePlaceholder,keydown:[e.resetInputState,function(t){if(!("button"in t)&&e._k(t.keyCode,"down",40,t.key))return null;t.preventDefault(),e.navigateOptions("next")},function(t){if(!("button"in t)&&e._k(t.keyCode,"up",38,t.key))return null;t.preventDefault(),e.navigateOptions("prev")},function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key))return null;t.preventDefault(),e.selectOption(t)},function(t){if(!("button"in t)&&e._k(t.keyCode,"esc",27,t.key))return null;t.stopPropagation(),t.preventDefault(),e.visible=!1},function(t){if(!("button"in t)&&e._k(t.keyCode,"delete",[8,46],t.key))return null;e.deletePrevTag(t)}],input:[function(t){t.target.composing||(e.query=t.target.value)},function(t){return e.handleQueryChange(t.target.value)}]}}):e._e()],1):e._e(),i("el-input",{ref:"reference",class:{"is-focus":e.visible},attrs:{type:"text",placeholder:e.currentPlaceholder,name:e.name,size:e.size,disabled:e.disabled,readonly:!e.filterable||e.multiple,"validate-event":!1},on:{focus:e.handleFocus,blur:e.handleBlur},nativeOn:{mousedown:function(t){e.handleMouseDown(t)},keyup:function(t){e.debouncedOnInputChange(t)},keydown:[function(t){if(!("button"in t)&&e._k(t.keyCode,"down",40,t.key))return null;t.preventDefault(),e.navigateOptions("next")},function(t){if(!("button"in t)&&e._k(t.keyCode,"up",38,t.key))return null;t.preventDefault(),e.navigateOptions("prev")},function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key))return null;t.preventDefault(),e.selectOption(t)},function(t){if(!("button"in t)&&e._k(t.keyCode,"esc",27,t.key))return null;t.stopPropagation(),t.preventDefault(),e.visible=!1},function(t){if(!("button"in t)&&e._k(t.keyCode,"tab",9,t.key))return null;e.visible=!1}],paste:function(t){e.debouncedOnInputChange(t)},mouseenter:function(t){e.inputHovering=!0},mouseleave:function(t){e.inputHovering=!1}},model:{value:e.selectedLabel,callback:function(t){e.selectedLabel=t},expression:"selectedLabel"}},[i("i",{class:["el-select__caret","el-input__icon","el-icon-"+e.iconClass],attrs:{slot:"suffix"},on:{click:e.handleIconClick},slot:"suffix"})]),i("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":e.handleMenuEnter,"after-leave":e.doDestroy}},[i("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:e.visible&&!1!==e.emptyText,expression:"visible && emptyText !== false"}],ref:"popper"},[i("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.options.length>0&&!e.loading,expression:"options.length > 0 && !loading"}],class:{"is-empty":!e.allowCreate&&0===e.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[e.showNewOption?i("el-option",{attrs:{value:e.query,created:""}}):e._e(),e._t("default")],2),e.emptyText&&(e.allowCreate&&0===e.options.length||!e.allowCreate)?i("p",{staticClass:"el-select-dropdown__empty"},[e._v(e._s(e.emptyText))]):e._e()],1)],1)],1)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(115),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(116),s=i.n(n),a=i(117),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(18),a=n(s),r=i(1),o=n(r);t.default={name:"ElDialog",mixins:[a.default,o.default],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},appendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},width:String,fullscreen:Boolean,customClass:{type:String,default:""},top:{type:String,default:"15vh"},beforeClose:Function,center:{type:Boolean,default:!1}},data:function(){return{closed:!1}},watch:{visible:function(e){var t=this;this.$emit("update:visible",e),e?(this.closed=!1,this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0}),this.appendToBody&&document.body.appendChild(this.$el)):(this.$el.removeEventListener("scroll",this.updatePopper),this.closed||this.$emit("close"))}},computed:{style:function(){var e={};return this.width&&(e.width=this.width),this.fullscreen||(e.marginTop=this.top),e}},methods:{handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.hide):this.hide()},hide:function(e){!1!==e&&(this.$emit("update:visible",!1),this.$emit("close"),this.closed=!0)},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")}},mounted:function(){this.visible&&(this.rendered=!0,this.open(),this.appendToBody&&document.body.appendChild(this.$el))}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"dialog-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-dialog__wrapper",on:{click:function(t){if(t.target!==t.currentTarget)return null;e.handleWrapperClick(t)}}},[i("div",{ref:"dialog",staticClass:"el-dialog",class:[{"is-fullscreen":e.fullscreen,"el-dialog--center":e.center},e.customClass],style:e.style},[i("div",{staticClass:"el-dialog__header"},[e._t("title",[i("span",{staticClass:"el-dialog__title"},[e._v(e._s(e.title))])]),e.showClose?i("button",{staticClass:"el-dialog__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:e.handleClose}},[i("i",{staticClass:"el-dialog__close el-icon el-icon-close"})]):e._e()],2),e.rendered?i("div",{staticClass:"el-dialog__body"},[e._t("default")],2):e._e(),e.$slots.footer?i("div",{staticClass:"el-dialog__footer"},[e._t("footer")],2):e._e()])])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(119),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(120),s=i.n(n),a=i(124),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(13),a=n(s),r=i(7),o=n(r),l=i(16),u=n(l),c=i(121),d=n(c),h=i(1),f=n(h),p=i(9);t.default={name:"ElAutocomplete",mixins:[f.default],componentName:"ElAutocomplete",components:{ElInput:o.default,ElAutocompleteSuggestions:d.default},directives:{Clickoutside:u.default},props:{props:{type:Object,default:function(){return{label:"value",value:"value"}}},popperClass:String,placeholder:String,disabled:Boolean,name:String,size:String,value:String,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,icon:String,onIconClick:Function,selectWhenUnmatched:{type:Boolean,default:!1},label:String,debounce:{type:Number,default:300}},data:function(){return{activated:!1,isOnComposition:!1,suggestions:[],loading:!1,highlightedIndex:-1}},computed:{suggestionVisible:function(){var e=this.suggestions;return(Array.isArray(e)&&e.length>0||this.loading)&&this.activated},id:function(){return"el-autocomplete-"+(0,p.generateId)()}},watch:{suggestionVisible:function(e){this.broadcast("ElAutocompleteSuggestions","visible",[e,this.$refs.input.$refs.input.offsetWidth])}},methods:{getData:function(e){var t=this;this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,Array.isArray(e)?t.suggestions=e:console.error("autocomplete suggestions must be an array")})},handleComposition:function(e){"compositionend"===e.type?(this.isOnComposition=!1,this.handleChange(e.target.value)):this.isOnComposition=!0},handleChange:function(e){if(this.$emit("input",e),this.isOnComposition||!this.triggerOnFocus&&!e)return void(this.suggestions=[]);this.debouncedGetData(e)},handleFocus:function(e){this.activated=!0,this.$emit("focus",e),this.triggerOnFocus&&this.debouncedGetData(this.value)},handleBlur:function(e){this.$emit("blur",e)},close:function(e){this.activated=!1},handleKeyEnter:function(e){var t=this;this.suggestionVisible&&this.highlightedIndex>=0&&this.highlightedIndex=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".el-autocomplete-suggestion__list li"),n=i[e],s=t.scrollTop,a=n.offsetTop;a+n.scrollHeight>s+t.clientHeight&&(t.scrollTop+=n.scrollHeight),a=0;t--)e.splice(t,0,e[t]);e=e.join("")}return/^[1-9a-fA-F]{6}$/.test(e)?{red:parseInt(e.slice(0,2),16),green:parseInt(e.slice(2,4),16),blue:parseInt(e.slice(4,6),16)}:{red:255,green:255,blue:255}},mixColor:function(e,t){var i=this.getColorChannels(e),n=i.red,s=i.green,a=i.blue;return t>0?(n*=1-t,s*=1-t,a*=1-t):(n+=(255-n)*t,s+=(255-s)*t,a+=(255-a)*t),"rgb("+Math.round(n)+", "+Math.round(s)+", "+Math.round(a)+")"},addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var i=this.openedMenus;-1===i.indexOf(e)&&(this.uniqueOpened&&(this.openedMenus=i.filter(function(e){return-1!==t.indexOf(e)})),this.openedMenus.push(e))},closeMenu:function(e){this.openedMenus.splice(this.openedMenus.indexOf(e),1)},handleSubmenuClick:function(e){var t=e.index,i=e.indexPath;-1!==this.openedMenus.indexOf(t)?(this.closeMenu(t),this.$emit("close",t,i)):(this.openMenu(t,i),this.$emit("open",t,i))},handleItemClick:function(e){var t=e.index,i=e.indexPath;this.activeIndex=e.index,this.$emit("select",t,i,e),("horizontal"===this.mode||this.collapse)&&(this.openedMenus=[]),this.router&&this.routeToItem(e)},initOpenedMenu:function(){var e=this,t=this.activeIndex,i=this.items[t];if(i&&"horizontal"!==this.mode&&!this.collapse){i.indexPath.forEach(function(t){var i=e.submenus[t];i&&e.openMenu(t,i.indexPath)})}},routeToItem:function(e){var t=e.route||e.index;try{this.$router.push(t)}catch(e){console.error(e)}},open:function(e){var t=this,i=this.submenus[e.toString()].indexPath;i.forEach(function(e){return t.openMenu(e,i)})},close:function(e){this.closeMenu(e)}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick),"horizontal"===this.mode&&new o.default(this.$el)}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(146),s=function(e){return e&&e.__esModule?e:{default:e}}(n),a=function(e){this.domNode=e,this.init()};a.prototype.init=function(){var e=this.domNode.childNodes;[].filter.call(e,function(e){return 1===e.nodeType}).forEach(function(e){new s.default(e)})},t.default=a},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(36),a=n(s),r=i(147),o=n(r),l=function(e){this.domNode=e,this.submenu=null,this.init()};l.prototype.init=function(){this.domNode.setAttribute("tabindex","0");var e=this.domNode.querySelector(".el-menu");e&&(this.submenu=new o.default(this,e)),this.addListeners()},l.prototype.addListeners=function(){var e=this,t=a.default.keys;this.domNode.addEventListener("keydown",function(i){var n=!1;switch(i.keyCode){case t.down:a.default.triggerEvent(i.currentTarget,"mouseenter"),e.submenu.gotoSubIndex(0),n=!0;break;case t.up:a.default.triggerEvent(i.currentTarget,"mouseenter"),e.submenu.gotoSubIndex(e.submenu.subMenuItems.length-1),n=!0;break;case t.tab:a.default.triggerEvent(i.currentTarget,"mouseleave");break;case t.enter:case t.space:n=!0,i.currentTarget.click()}n&&i.preventDefault()})},t.default=l},function(e,t,i){"use strict";t.__esModule=!0;var n=i(36),s=function(e){return e&&e.__esModule?e:{default:e}}(n),a=function(e,t){this.domNode=t,this.parent=e,this.subMenuItems=[],this.subIndex=0,this.init()};a.prototype.init=function(){this.subMenuItems=this.domNode.querySelectorAll("li"),this.addListeners()},a.prototype.gotoSubIndex=function(e){e===this.subMenuItems.length?e=0:e<0&&(e=this.subMenuItems.length-1),this.subMenuItems[e].focus(),this.subIndex=e},a.prototype.addListeners=function(){var e=this,t=s.default.keys,i=this.parent.domNode;Array.prototype.forEach.call(this.subMenuItems,function(n){n.addEventListener("keydown",function(n){var a=!1;switch(n.keyCode){case t.down:e.gotoSubIndex(e.subIndex+1),a=!0;break;case t.up:e.gotoSubIndex(e.subIndex-1),a=!0;break;case t.tab:s.default.triggerEvent(i,"mouseleave");break;case t.enter:case t.space:a=!0,n.currentTarget.click()}return a&&(n.preventDefault(),n.stopPropagation()),!1})})},t.default=a},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("el-menu-collapse-transition",[i("ul",{key:+e.collapse,staticClass:"el-menu",class:{"el-menu--horizontal":"horizontal"===e.mode,"el-menu--collapse":e.collapse},style:{backgroundColor:e.backgroundColor||""},attrs:{role:"menubar"}},[e._t("default")],2)])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(150),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(151),s=i.n(n),a=i(152),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(29),a=n(s),r=i(55),o=n(r),l=i(1),u=n(l);t.default={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[o.default,u.default],components:{ElCollapseTransition:a.default},props:{index:{type:String,required:!0}},data:function(){return{timeout:null,items:{},submenus:{}}},computed:{menuTransitionName:function(){return this.rootMenu.collapse?"el-zoom-in-left":"el-zoom-in-top"},opened:function(){return this.rootMenu.openedMenus.indexOf(this.index)>-1},active:function(){var e=!1,t=this.submenus,i=this.items;return Object.keys(i).forEach(function(t){i[t].active&&(e=!0)}),Object.keys(t).forEach(function(i){t[i].active&&(e=!0)}),e},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},titleStyle:function(){return"horizontal"!==this.mode?{color:this.textColor}:{borderBottomColor:this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent",color:this.active?this.activeTextColor:this.textColor}}},methods:{addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},handleClick:function(){var e=this.rootMenu;"hover"===e.menuTrigger&&"horizontal"===e.mode||e.collapse&&"vertical"===e.mode||this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.openMenu(e.index,e.indexPath)},300))},handleMouseleave:function(){var e=this,t=this.rootMenu;"click"===t.menuTrigger&&"horizontal"===t.mode||!t.collapse&&"vertical"===t.mode||(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.closeMenu(e.index)},300))},handleTitleMouseenter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$refs["submenu-title"].style.backgroundColor=this.rootMenu.hoverBackground)},handleTitleMouseleave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$refs["submenu-title"].style.backgroundColor=this.rootMenu.backgroundColor||"")}},created:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this)},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{class:{"el-submenu":!0,"is-active":e.active,"is-opened":e.opened},attrs:{role:"menuitem","aria-haspopup":"true","aria-expanded":e.opened},on:{mouseenter:e.handleMouseenter,mouseleave:e.handleMouseleave,focus:e.handleMouseenter}},[i("div",{ref:"submenu-title",staticClass:"el-submenu__title",style:[e.paddingStyle,e.titleStyle,{backgroundColor:e.backgroundColor}],on:{click:e.handleClick,mouseenter:e.handleTitleMouseenter,mouseleave:e.handleTitleMouseleave}},[e._t("title"),i("i",{class:{"el-submenu__icon-arrow":!0,"el-icon-arrow-down":"horizontal"===e.rootMenu.mode||"vertical"===e.rootMenu.mode&&!e.rootMenu.collapse,"el-icon-arrow-right":"vertical"===e.rootMenu.mode&&e.rootMenu.collapse}})],2),"horizontal"===e.rootMenu.mode||"vertical"===e.rootMenu.mode&&e.rootMenu.collapse?[i("transition",{attrs:{name:e.menuTransitionName}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.opened,expression:"opened"}],staticClass:"el-menu",style:{backgroundColor:e.rootMenu.backgroundColor||""},attrs:{role:"menu"}},[e._t("default")],2)])]:i("el-collapse-transition",[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.opened,expression:"opened"}],staticClass:"el-menu",style:{backgroundColor:e.rootMenu.backgroundColor||""},attrs:{role:"menu"}},[e._t("default")],2)])],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(154),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(155),s=i.n(n),a=i(156),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(55),a=n(s),r=i(1),o=n(r);t.default={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[a.default,o.default],props:{index:{type:String,required:!0},route:{type:Object,required:!1},disabled:{type:Boolean,required:!1}},computed:{active:function(){return this.index===this.rootMenu.activeIndex},hoverBackground:function(){return this.rootMenu.hoverBackground},backgroundColor:function(){return this.rootMenu.backgroundColor||""},activeTextColor:function(){return this.rootMenu.activeTextColor||""},textColor:function(){return this.rootMenu.textColor||""},mode:function(){return this.rootMenu.mode},itemStyle:function(){var e={color:this.active?this.activeTextColor:this.textColor};return"horizontal"!==this.mode||this.isNested||(e.borderBottomColor=this.active?this.rootMenu.activeTextColor?this.activeTextColor:"":"transparent"),e},isNested:function(){return this.parentMenu!==this.rootMenu}},methods:{onMouseEnter:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.hoverBackground)},onMouseLeave:function(){("horizontal"!==this.mode||this.rootMenu.backgroundColor)&&(this.$el.style.backgroundColor=this.backgroundColor)},handleClick:function(){this.dispatch("ElMenu","item-click",this),this.$emit("click",this)}},created:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:[e.paddingStyle,e.itemStyle,{backgroundColor:e.backgroundColor}],attrs:{role:"menuitem",tabindex:"-1"},on:{click:e.handleClick,mouseenter:e.onMouseEnter,focus:e.onMouseEnter,blur:e.onMouseLeave,mouseleave:e.onMouseLeave}},[e.$parent===e.rootMenu&&e.rootMenu.collapse?i("el-tooltip",{attrs:{effect:"dark",placement:"right"}},[i("div",{attrs:{slot:"content"},slot:"content"},[e._t("title")],2),i("div",{staticStyle:{position:"absolute",left:"0",top:"0",height:"100%",width:"100%",display:"inline-block","box-sizing":"border-box",padding:"0 20px"}},[e._t("default")],2)]):[e._t("default"),e._t("title")]],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(158),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(159),s=i.n(n),a=i(160),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",inject:["rootMenu"],props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){var e=20,t=this.$parent;if(this.rootMenu.collapse)return 20;for(;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return e}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item-group"},[i("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:e.levelPadding+"px"}},[e.$slots.title?e._t("title"):[e._v(e._s(e.title))]],2),i("ul",[e._t("default")],2)])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(162),s=i.n(n),a=i(163),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(7),a=n(s),r=i(13),o=n(r),l=i(22),u=n(l),c=i(57),d=n(c);t.default={name:"ElInputNumber",mixins:[(0,u.default)("input")],inject:{elFormItem:{default:""}},directives:{repeatClick:d.default},components:{ElInput:a.default},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},value:{default:0},disabled:Boolean,size:String,controls:{type:Boolean,default:!0},controlsPosition:{type:String,default:""},debounce:{type:Number,default:300},name:String,label:String},data:function(){return{currentValue:0}},watch:{value:{immediate:!0,handler:function(e){var t=Number(e);isNaN(t)||(t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.$emit("input",t))}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)this.max},precision:function(){var e=this.value,t=this.step,i=this.getPrecision;return Math.max(i(e),i(t))},controlsAtRight:function(){return"right"===this.controlsPosition},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},inputNumberSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.precision),parseFloat(parseFloat(Number(e).toFixed(t)))},getPrecision:function(e){var t=e.toString(),i=t.indexOf("."),n=0;return-1!==i&&(n=t.length-i-1),n},_increase:function(e,t){if("number"!=typeof e)return this.currentValue;var i=Math.pow(10,this.precision);return this.toPrecision((i*e+i*t)/i)},_decrease:function(e,t){if("number"!=typeof e)return this.currentValue;var i=Math.pow(10,this.precision);return this.toPrecision((i*e-i*t)/i)},increase:function(){if(!this.disabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);t>this.max||this.setCurrentValue(t)}},decrease:function(){if(!this.disabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);t=this.max&&(e=this.max),e<=this.min&&(e=this.min),t===e)return void this.$refs.input.setCurrentValue(this.currentValue);this.$emit("change",e,t),this.$emit("input",e),this.currentValue=e},handleInput:function(e){if(""!==e){var t=Number(e);isNaN(t)?this.$refs.input.setCurrentValue(this.currentValue):this.setCurrentValue(t)}}},created:function(){var e=this;this.debounceHandleInput=(0,o.default)(this.debounce,function(t){e.handleInput(t)})},mounted:function(){var e=this.$refs.input.$refs.input;e.setAttribute("role","spinbutton"),e.setAttribute("aria-valuemax",this.max),e.setAttribute("aria-valuemin",this.min),e.setAttribute("aria-valuenow",this.currentValue),e.setAttribute("aria-disabled",this.disabled)},updated:function(){this.$refs.input.$refs.input.setAttribute("aria-valuenow",this.currentValue)}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-input-number",class:[e.inputNumberSize?"el-input-number--"+e.inputNumberSize:"",{"is-disabled":e.disabled},{"is-without-controls":!e.controls},{"is-controls-right":e.controlsAtRight}]},[e.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":e.minDisabled},attrs:{role:"button"},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key))return null;e.decrease(t)}}},[i("i",{class:"el-icon-"+(e.controlsAtRight?"arrow-down":"minus")})]):e._e(),e.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":e.maxDisabled},attrs:{role:"button"},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key))return null;e.increase(t)}}},[i("i",{class:"el-icon-"+(e.controlsAtRight?"arrow-up":"plus")})]):e._e(),i("el-input",{ref:"input",attrs:{value:e.currentValue,disabled:e.disabled,size:e.inputNumberSize,max:e.max,min:e.min,name:e.name,label:e.label},on:{blur:e.handleBlur,focus:e.handleFocus,input:e.debounceHandleInput},nativeOn:{keydown:[function(t){if(!("button"in t)&&e._k(t.keyCode,"up",38,t.key))return null;t.preventDefault(),e.increase(t)},function(t){if(!("button"in t)&&e._k(t.keyCode,"down",40,t.key))return null;t.preventDefault(),e.decrease(t)}]}},[e.$slots.prepend?i("template",{attrs:{slot:"prepend"},slot:"prepend"},[e._t("prepend")],2):e._e(),e.$slots.append?i("template",{attrs:{slot:"append"},slot:"append"},[e._t("append")],2):e._e()],2)],1)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(165),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component("el-radio",s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(166),s=i.n(n),a=i(167),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(1),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"ElRadio",mixins:[s.default],inject:{elFormItem:{default:""}},componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String,border:Boolean,size:String},data:function(){return{focus:!1}},computed:{isGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return this._radioGroup=e,!0;e=e.$parent}return!1},model:{get:function(){return this.isGroup?this._radioGroup.value:this.value},set:function(e){this.isGroup?this.dispatch("ElRadioGroup","input",[e]):this.$emit("input",e)}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup?this._radioGroup.radioGroupSize||e:e},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled:this.disabled},tabIndex:function(){return this.isDisabled?-1:this.isGroup?this.model===this.label?0:-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.model),e.isGroup&&e.dispatch("ElRadioGroup","handleChange",e.model)})}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-radio",class:[e.border&&e.radioSize?"el-radio--"+e.radioSize:"",{"is-disabled":e.isDisabled},{"is-focus":e.focus},{"is-bordered":e.border},{"is-checked":e.model===e.label}],attrs:{role:"radio","aria-checked":e.model===e.label,"aria-disabled":e.isDisabled,tabindex:e.tabIndex},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"space",32,t.key))return null;t.stopPropagation(),t.preventDefault(),e.model=e.label}}},[i("span",{staticClass:"el-radio__input",class:{"is-disabled":e.isDisabled,"is-checked":e.model===e.label}},[i("span",{staticClass:"el-radio__inner"}),i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio",name:e.name,disabled:e.isDisabled,tabindex:"-1"},domProps:{value:e.label,checked:e._q(e.model,e.label)},on:{focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},change:[function(t){e.model=e.label},e.handleChange]}})]),i("span",{staticClass:"el-radio__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(169),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(170),s=i.n(n),a=i(171),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(1),s=function(e){return e&&e.__esModule?e:{default:e}}(n),a=Object.freeze({LEFT:37,UP:38,RIGHT:39,DOWN:40});t.default={name:"ElRadioGroup",componentName:"ElRadioGroup",inject:{elFormItem:{default:""}},mixins:[s.default],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},radioGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},created:function(){var e=this;this.$on("handleChange",function(t){e.$emit("change",t)})},mounted:function(){var e=this.$el.querySelectorAll("[type=radio]");[].some.call(e,function(e){return e.checked})||(this.$el.querySelectorAll("[role=radio]")[0].tabIndex=0)},methods:{handleKeydown:function(e){var t=e.target,i="INPUT"===t.nodeName?"[type=radio]":"[role=radio]",n=this.$el.querySelectorAll(i),s=n.length,r=[].indexOf.call(n,t),o=this.$el.querySelectorAll("[role=radio]");switch(e.keyCode){case a.LEFT:case a.UP:e.stopPropagation(),e.preventDefault(),0===r?o[s-1].click():o[r-1].click();break;case a.RIGHT:case a.DOWN:r===s-1?(e.stopPropagation(),e.preventDefault(),o[0].click()):o[r+1].click()}}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[this.value])}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-radio-group",attrs:{role:"radiogroup"},on:{keydown:e.handleKeydown}},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(173),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(174),s=i.n(n),a=i(175),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(1),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"ElRadioButton",mixins:[s.default],inject:{elFormItem:{default:""}},props:{label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},computed:{value:{get:function(){return this._radioGroup.value},set:function(e){this._radioGroup.$emit("input",e)}},_radioGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return e;e=e.$parent}return!1},activeStyle:function(){return{backgroundColor:this._radioGroup.fill||"",borderColor:this._radioGroup.fill||"",boxShadow:this._radioGroup.fill?"-1px 0 0 0 "+this._radioGroup.fill:"",color:this._radioGroup.textColor||""}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._radioGroup.radioGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this.disabled||this._radioGroup.disabled},tabIndex:function(){return this.isDisabled?-1:this._radioGroup?this.value===this.label?0:-1:0}},methods:{handleChange:function(){var e=this;this.$nextTick(function(){e.dispatch("ElRadioGroup","handleChange",e.value)})}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-radio-button",class:[e.size?"el-radio-button--"+e.size:"",{"is-active":e.value===e.label},{"is-disabled":e.isDisabled},{"is-focus":e.focus}],attrs:{role:"radio","aria-checked":e.value===e.label,"aria-disabled":e.isDisabled,tabindex:e.tabIndex},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"space",32,t.key))return null;t.stopPropagation(),t.preventDefault(),e.value=e.label}}},[i("input",{directives:[{name:"model",rawName:"v-model",value:e.value,expression:"value"}],staticClass:"el-radio-button__orig-radio",attrs:{type:"radio",name:e.name,disabled:e.isDisabled,tabindex:"-1"},domProps:{value:e.label,checked:e._q(e.value,e.label)},on:{change:[function(t){e.value=e.label},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}),i("span",{staticClass:"el-radio-button__inner",style:e.value===e.label?e.activeStyle:null},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(177),s=i.n(n),a=i(178),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(1),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"ElCheckbox",mixins:[s.default],inject:{elFormItem:{default:""}},componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this.isGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.lengththis._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):(this.$emit("input",e),this.selfModel=e)}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?this.model.indexOf(this.label)>-1:null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},isGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return this._checkboxGroup=e,!0;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},isDisabled:function(){return this.isGroup?this._checkboxGroup.disabled||this.disabled:this.disabled},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxSize:function(){var e=this.size||this._elFormItemSize||(this.$ELEMENT||{}).size;return this.isGroup?this._checkboxGroup.checkboxGroupSize||e:e}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number],id:String,controls:String,border:Boolean,size:String},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;this.$nextTick(function(){t.isLimitExceeded||(t.$emit("change",t.model,e),t.isGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value]))})}},created:function(){this.checked&&this.addToStore()},mounted:function(){this.indeterminate&&this.$el.setAttribute("aria-controls",this.controls)}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-checkbox",class:[e.border&&e.checkboxSize?"el-checkbox--"+e.checkboxSize:"",{"is-disabled":e.isDisabled},{"is-bordered":e.border},{"is-checked":e.isChecked}],attrs:{role:"checkbox","aria-checked":e.indeterminate?"mixed":e.isChecked,"aria-disabled":e.isDisabled,id:e.id}},[i("span",{staticClass:"el-checkbox__input",class:{"is-disabled":e.isDisabled,"is-checked":e.isChecked,"is-indeterminate":e.indeterminate,"is-focus":e.focus},attrs:{"aria-checked":"mixed"}},[i("span",{staticClass:"el-checkbox__inner"}),e.trueLabel||e.falseLabel?i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox",name:e.name,disabled:e.isDisabled,"true-value":e.trueLabel,"false-value":e.falseLabel},domProps:{checked:Array.isArray(e.model)?e._i(e.model,null)>-1:e._q(e.model,e.trueLabel)},on:{change:[function(t){var i=e.model,n=t.target,s=n.checked?e.trueLabel:e.falseLabel;if(Array.isArray(i)){var a=e._i(i,null);n.checked?a<0&&(e.model=i.concat([null])):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}):i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox",disabled:e.isDisabled,name:e.name},domProps:{value:e.label,checked:Array.isArray(e.model)?e._i(e.model,e.label)>-1:e.model},on:{change:[function(t){var i=e.model,n=t.target,s=!!n.checked;if(Array.isArray(i)){var a=e.label,r=e._i(i,a);n.checked?r<0&&(e.model=i.concat([a])):r>-1&&(e.model=i.slice(0,r).concat(i.slice(r+1)))}else e.model=s},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}})]),e.$slots.default||e.label?i("span",{staticClass:"el-checkbox__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2):e._e()])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(180),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(181),s=i.n(n),a=i(182),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(1),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"ElCheckboxButton",mixins:[s.default],inject:{elFormItem:{default:""}},data:function(){return{selfModel:!1,focus:!1,isLimitExceeded:!1}},props:{value:{},label:{},disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},computed:{model:{get:function(){return this._checkboxGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){this._checkboxGroup?(this.isLimitExceeded=!1,void 0!==this._checkboxGroup.min&&e.lengththis._checkboxGroup.max&&(this.isLimitExceeded=!0),!1===this.isLimitExceeded&&this.dispatch("ElCheckboxGroup","input",[e])):void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?this.model.indexOf(this.label)>-1:null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},_checkboxGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return e;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},activeStyle:function(){return{backgroundColor:this._checkboxGroup.fill||"",borderColor:this._checkboxGroup.fill||"",color:this._checkboxGroup.textColor||"","box-shadow":"-1px 0 0 0 "+this._checkboxGroup.fill}},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},size:function(){return this._checkboxGroup.checkboxGroupSize||this._elFormItemSize||(this.$ELEMENT||{}).size},isDisabled:function(){return this._checkboxGroup?this._checkboxGroup.disabled||this.disabled:this.disabled}},methods:{addToStore:function(){Array.isArray(this.model)&&-1===this.model.indexOf(this.label)?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;this.$nextTick(function(){t.isLimitExceeded||(t.$emit("change",t.model,e),t._checkboxGroup&&t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value]))})}},created:function(){this.checked&&this.addToStore()}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-checkbox-button",class:[e.size?"el-checkbox-button--"+e.size:"",{"is-disabled":e.isDisabled},{"is-checked":e.isChecked},{"is-focus":e.focus}],attrs:{role:"checkbox","aria-checked":e.isChecked,"aria-disabled":e.isDisabled}},[e.trueLabel||e.falseLabel?i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:e.name,disabled:e.isDisabled,"true-value":e.trueLabel,"false-value":e.falseLabel},domProps:{checked:Array.isArray(e.model)?e._i(e.model,null)>-1:e._q(e.model,e.trueLabel)},on:{change:[function(t){var i=e.model,n=t.target,s=n.checked?e.trueLabel:e.falseLabel;if(Array.isArray(i)){var a=e._i(i,null);n.checked?a<0&&(e.model=i.concat([null])):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}):i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:e.name,disabled:e.isDisabled},domProps:{value:e.label,checked:Array.isArray(e.model)?e._i(e.model,e.label)>-1:e.model},on:{change:[function(t){var i=e.model,n=t.target,s=!!n.checked;if(Array.isArray(i)){var a=e.label,r=e._i(i,a);n.checked?r<0&&(e.model=i.concat([a])):r>-1&&(e.model=i.slice(0,r).concat(i.slice(r+1)))}else e.model=s},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}),e.$slots.default||e.label?i("span",{staticClass:"el-checkbox-button__inner",style:e.isChecked?e.activeStyle:null},[e._t("default",[e._v(e._s(e.label))])],2):e._e()])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(184),s=i.n(n),a=i(185),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(1),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[s.default],inject:{elFormItem:{default:""}},props:{value:{},disabled:Boolean,min:Number,max:Number,size:String,fill:String,textColor:String},computed:{_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},checkboxGroupSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-checkbox-group",attrs:{role:"group","aria-label":"checkbox-group"}},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(187),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(188),s=i.n(n),a=i(189),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(22),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"ElSwitch",mixins:[(0,s.default)("input")],props:{value:{type:[Boolean,String,Number],default:!1},disabled:{type:Boolean,default:!1},width:{type:Number,default:0},onIconClass:{type:String,default:""},offIconClass:{type:String,default:""},onText:String,offText:String,onColor:{type:String,default:""},offColor:{type:String,default:""},onValue:{type:[Boolean,String,Number],default:!0},offValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""}},data:function(){return{coreWidth:this.width}},created:function(){~[this.onValue,this.offValue].indexOf(this.value)||this.$emit("input",this.offValue)},computed:{checked:function(){return this.value===this.onValue},transform:function(){return this.checked?"translate3d("+(this.coreWidth-20)+"px, 0, 0)":""}},watch:{checked:function(){this.$refs.input.checked=this.checked,(this.onColor||this.offColor)&&this.setBackgroundColor()}},methods:{handleChange:function(e){var t=this;this.$emit("input",this.checked?this.offValue:this.onValue),this.$emit("change",this.checked?this.offValue:this.onValue),this.$nextTick(function(){t.$refs.input.checked=t.checked})},setBackgroundColor:function(){var e=this.checked?this.onColor:this.offColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e},switchValue:function(){this.$refs.input.click()}},mounted:function(){this.coreWidth=this.width||40,(this.onColor||this.offColor)&&this.setBackgroundColor(),this.$refs.input.checked=this.checked}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-switch",class:{"is-disabled":e.disabled,"is-checked":e.checked},attrs:{role:"switch","aria-checked":e.checked,"aria-disabled":e.disabled},on:{click:e.switchValue}},[i("input",{ref:"input",staticClass:"el-switch__input",attrs:{type:"checkbox",name:e.name,"true-value":e.onValue,"false-value":e.offValue,disabled:e.disabled},on:{change:e.handleChange,keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key))return null;e.switchValue(t)}}}),e.offIconClass||e.offText?i("span",{class:["el-switch__label","el-switch__label--left",e.checked?"":"is-active"]},[e.offIconClass?i("i",{class:[e.offIconClass]}):e._e(),!e.offIconClass&&e.offText?i("span",{attrs:{"aria-hidden":e.checked}},[e._v(e._s(e.offText))]):e._e()]):e._e(),i("span",{ref:"core",staticClass:"el-switch__core",style:{width:e.coreWidth+"px"}},[i("span",{staticClass:"el-switch__button",style:{transform:e.transform}})]),e.onIconClass||e.onText?i("span",{class:["el-switch__label","el-switch__label--right",e.checked?"is-active":""]},[e.onIconClass?i("i",{class:[e.onIconClass]}):e._e(),!e.onIconClass&&e.onText?i("span",{attrs:{"aria-hidden":!e.checked}},[e._v(e._s(e.onText))]):e._e()]):e._e()])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(191),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(192),s=i.n(n),a=i(193),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(1),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={mixins:[s.default],name:"ElOptionGroup",componentName:"ElOptionGroup",props:{label:String,disabled:{type:Boolean,default:!1}},data:function(){return{visible:!0}},watch:{disabled:function(e){this.broadcast("ElOption","handleGroupDisabled",e)}},methods:{queryChange:function(){this.visible=this.$children&&Array.isArray(this.$children)&&this.$children.some(function(e){return!0===e.visible})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"el-select-group__wrap"},[i("li",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-group__title"},[e._v(e._s(e.label))]),i("li",[i("ul",{staticClass:"el-select-group"},[e._t("default")],2)])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(195),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(196),s=i.n(n),a=i(207),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(14),a=n(s),r=i(33),o=n(r),l=i(13),u=n(l),c=i(24),d=i(5),h=n(d),f=i(197),p=n(f),m=i(198),v=n(m),g=i(199),y=n(g),b=i(201),_=n(b),C=i(206),x=n(C),w=i(38);t.default={name:"ElTable",mixins:[h.default],props:{data:{type:Array,default:function(){return[]}},width:[String,Number],height:[String,Number],maxHeight:[String,Number],fit:{type:Boolean,default:!0},stripe:Boolean,border:Boolean,rowKey:[String,Function],context:{},showHeader:{type:Boolean,default:!0},showSummary:Boolean,sumText:String,summaryMethod:Function,rowClassName:[String,Function],rowStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String},components:{TableHeader:_.default,TableFooter:x.default,TableBody:y.default,ElCheckbox:a.default},methods:{setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},clearSelection:function(){this.store.clearSelection()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY()},bindEvents:function(){var e=this,t=this.$refs,i=t.headerWrapper,n=t.footerWrapper,s=this.$refs,a=this;this.bodyWrapper.addEventListener("scroll",function(){i&&(i.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),s.fixedBodyWrapper&&(s.fixedBodyWrapper.scrollTop=this.scrollTop),s.rightFixedBodyWrapper&&(s.rightFixedBodyWrapper.scrollTop=this.scrollTop);var e=this.scrollWidth-this.offsetWidth-1,t=this.scrollLeft;a.scrollPosition=t>=e?"right":0===t?"left":"middle"});var r=function(t){var i=t.deltaX,n=t.deltaY;Math.abs(i)0?e.bodyWrapper.scrollLeft+=10:i<0&&(e.bodyWrapper.scrollLeft-=10))};i&&(0,w.mousewheel)(i,(0,o.default)(16,r)),n&&(0,w.mousewheel)(n,(0,o.default)(16,r)),this.fit&&(this.windowResizeListener=(0,o.default)(50,function(){e.$ready&&e.doLayout()}),(0,c.addResizeListener)(this.$el,this.windowResizeListener))},doLayout:function(){var e=this;this.store.updateColumns(),this.layout.update(),this.updateScrollY(),this.$nextTick(function(){e.height?e.layout.setHeight(e.height):e.maxHeight?e.layout.setMaxHeight(e.maxHeight):e.shouldUpdateHeight&&e.layout.updateHeight(),e.$el&&(e.isHidden=0===e.$el.clientWidth)})}},created:function(){var e=this;this.tableId="el-table_1_",this.debouncedLayout=(0,u.default)(50,function(){return e.doLayout()})},computed:{bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return"number"==typeof this.height||this.fixedColumns.length>0||this.rightFixedColumns.length>0},selection:function(){return this.store.states.selection},columns:function(){return this.store.states.columns},tableData:function(){return this.store.states.data},fixedColumns:function(){return this.store.states.fixedColumns},rightFixedColumns:function(){return this.store.states.rightFixedColumns},bodyHeight:function(){var e={};return this.height?e={height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight&&(e={"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight-this.layout.footerHeight:this.maxHeight-this.layout.footerHeight)+"px"}),e},bodyWidth:function(){var e=this.layout,t=e.bodyWidth,i=e.scrollY,n=e.gutterWidth;return t?t-(i?n:0)+"px":""},fixedBodyHeight:function(){var e={};if(this.height)e={height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""};else if(this.maxHeight){var t=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;this.showHeader&&(t-=this.layout.headerHeight),e={"max-height":t+"px"}}return e},fixedHeight:function(){return this.maxHeight?{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:function(e){this.layout.setHeight(e)},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){this.store.commit("setData",e),this.$ready&&this.doLayout()}},expandRowKeys:function(e){this.store.setExpandRowKeys(e)}},destroyed:function(){this.windowResizeListener&&(0,c.removeResizeListener)(this.$el,this.windowResizeListener)},mounted:function(){var e=this;this.bindEvents(),this.doLayout(),this.store.states.columns.forEach(function(t){t.filteredValue&&t.filteredValue.length&&e.store.commit("filterChange",{column:t,values:t.filteredValue,silent:!0})}),this.$ready=!0},data:function(){var e=new p.default(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll});return{store:e,layout:new v.default({store:e,table:this,fit:this.fit,showHeader:this.showHeader}),isHidden:!1,renderExpanded:null,resizeProxyVisible:!1,isGroup:!1,scrollPosition:"left"}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),a=n(s),r=i(13),o=n(r),l=i(38),u=function(e,t){var i=t.sortingColumn;return i&&"string"!=typeof i.sortable?(0,l.orderBy)(e,t.sortProp,t.sortOrder,i.sortMethod):e},c=function(e,t){var i={};return(e||[]).forEach(function(e,n){i[(0,l.getRowIdentity)(e,t)]={row:e,index:n}}),i},d=function(e,t,i){var n=!1,s=e.selection,a=s.indexOf(t);return void 0===i?-1===a?(s.push(t),n=!0):(s.splice(a,1),n=!0):i&&-1===a?(s.push(t),n=!0):!i&&a>-1&&(s.splice(a,1),n=!0),n},h=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],isComplex:!1,_data:null,filteredData:null,data:null,sortingColumn:null,sortProp:null,sortOrder:null,isAllSelected:!1,selection:[],reserveSelection:!1,selectable:null,currentRow:null,hoverRow:null,filters:{},expandRows:[],defaultExpandAll:!1};for(var i in t)t.hasOwnProperty(i)&&this.states.hasOwnProperty(i)&&(this.states[i]=t[i])};h.prototype.mutations={setData:function(e,t){var i=this,n=e._data!==t;e._data=t,e.data=u(t||[],e),this.updateCurrentRow(),e.reserveSelection?function(){var t=e.rowKey;t?function(){var n=e.selection,s=c(n,t);e.data.forEach(function(e){var i=(0,l.getRowIdentity)(e,t),a=s[i];a&&(n[a.index]=e)}),i.updateAllSelected()}():console.warn("WARN: rowKey is required when reserve-selection is enabled.")}():(n?this.clearSelection():this.cleanSelection(),this.updateAllSelected()),e.defaultExpandAll&&(this.states.expandRows=(e.data||[]).slice(0)),a.default.nextTick(function(){return i.table.updateScrollY()})},changeSortCondition:function(e){var t=this;e.data=u(e.filteredData||e._data||[],e),this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),a.default.nextTick(function(){return t.table.updateScrollY()})},filterChange:function(e,t){var i=this,n=t.column,s=t.values,r=t.silent;s&&!Array.isArray(s)&&(s=[s]);var o=n.property,c={};o&&(e.filters[n.id]=s,c[n.columnKey||n.id]=s);var d=e._data;Object.keys(e.filters).forEach(function(t){var n=e.filters[t];if(n&&0!==n.length){var s=(0,l.getColumnById)(i.states,t);s&&s.filterMethod&&(d=d.filter(function(e){return n.some(function(t){return s.filterMethod.call(null,t,e)})}))}}),e.filteredData=d,e.data=u(d,e),r||this.table.$emit("filter-change",c),a.default.nextTick(function(){return i.table.updateScrollY()})},insertColumn:function(e,t,i,n){var s=e._columns;n&&((s=n.children)||(s=n.children=[])),void 0!==i?s.splice(i,0,t):s.push(t),"selection"===t.type&&(e.selectable=t.selectable,e.reserveSelection=t.reserveSelection),this.updateColumns(),this.scheduleLayout()},removeColumn:function(e,t){var i=e._columns;i&&i.splice(i.indexOf(t),1),this.updateColumns(),this.scheduleLayout()},setHoverRow:function(e,t){e.hoverRow=t},setCurrentRow:function(e,t){var i=e.currentRow;e.currentRow=t,i!==t&&this.table.$emit("current-change",t,i)},rowSelectedChanged:function(e,t){var i=d(e,t),n=e.selection;if(i){var s=this.table;s.$emit("selection-change",n),s.$emit("select",n,t)}this.updateAllSelected()},toggleRowExpanded:function(e,t,i){var n=e.expandRows;if(void 0!==i){var s=n.indexOf(t);i?-1===s&&n.push(t):-1!==s&&n.splice(s,1)}else{var a=n.indexOf(t);-1===a?n.push(t):n.splice(a,1)}this.table.$emit("expand",t,-1!==n.indexOf(t))},toggleAllSelection:(0,o.default)(10,function(e){var t=e.data||[],i=!e.isAllSelected,n=this.states.selection,s=!1;t.forEach(function(t,n){e.selectable?e.selectable.call(null,t,n)&&d(e,t,i)&&(s=!0):d(e,t,i)&&(s=!0)});var a=this.table;s&&a.$emit("selection-change",n),a.$emit("select-all",n),e.isAllSelected=i})};var f=function e(t){var i=[];return t.forEach(function(t){t.children?i.push.apply(i,e(t.children)):i.push(t)}),i};h.prototype.updateColumns=function(){var e=this.states,t=e._columns||[];e.fixedColumns=t.filter(function(e){return!0===e.fixed||"left"===e.fixed}),e.rightFixedColumns=t.filter(function(e){return"right"===e.fixed}),e.fixedColumns.length>0&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0])),e.originColumns=[].concat(e.fixedColumns).concat(t.filter(function(e){return!e.fixed})).concat(e.rightFixedColumns),e.columns=f(e.originColumns),e.isComplex=e.fixedColumns.length>0||e.rightFixedColumns.length>0},h.prototype.isSelected=function(e){return(this.states.selection||[]).indexOf(e)>-1},h.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection=[],t.length>0&&this.table.$emit("selection-change",e.selection)},h.prototype.setExpandRowKeys=function(e){var t=[],i=this.states.data,n=this.states.rowKey;if(!n)throw new Error("[Table] prop row-key should not be empty.");var s=c(i,n);e.forEach(function(e){var i=s[e];i&&t.push(i.row)}),this.states.expandRows=t},h.prototype.toggleRowSelection=function(e,t){d(this.states,e,t)&&this.table.$emit("selection-change",this.states.selection)},h.prototype.cleanSelection=function(){var e=this.states.selection||[],t=this.states.data,i=this.states.rowKey,n=void 0;if(i){n=[];var s=c(e,i),a=c(t,i);for(var r in s)s.hasOwnProperty(r)&&!a[r]&&n.push(s[r].row)}else n=e.filter(function(e){return-1===t.indexOf(e)});n.forEach(function(t){e.splice(e.indexOf(t),1)}),n.length&&this.table.$emit("selection-change",e)},h.prototype.updateAllSelected=function(){var e=this.states,t=e.selection,i=e.rowKey,n=e.selectable,s=e.data;if(!s||0===s.length)return void(e.isAllSelected=!1);var a=void 0;i&&(a=c(e.selection,i));for(var r=function(e){return a?!!a[(0,l.getRowIdentity)(e,i)]:-1!==t.indexOf(e)},o=!0,u=0,d=0,h=s.length;d1?i-1:0),s=1;st.offsetHeight}}},e.prototype.setHeight=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"height",i=this.table.$el;"string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,i&&("number"==typeof e?(i.style[t]=e+"px",this.updateHeight()):"string"==typeof e&&(""===e&&(i.style[t]=""),this.updateHeight()))},e.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},e.prototype.updateHeight=function(){var e=this.tableHeight=this.table.$el.clientHeight,t=!this.table.data||0===this.table.data.length,i=this.table.$refs,n=i.headerWrapper,s=i.footerWrapper,a=this.footerHeight=s?s.offsetHeight:0;if(!this.showHeader||n){if(this.showHeader){var r=this.headerHeight=n.offsetHeight,o=e-r-a+(s?1:0);null===this.height||isNaN(this.height)&&"string"!=typeof this.height||(this.bodyHeight=o),this.fixedBodyHeight=this.scrollX?o-this.gutterWidth:o}else this.headerHeight=0,null===this.height||isNaN(this.height)&&"string"!=typeof this.height||(this.bodyHeight=e-a+(s?1:0)),this.fixedBodyHeight=this.scrollX?e-this.gutterWidth:e;this.viewportHeight=this.scrollX?e-(t?0:this.gutterWidth):e}},e.prototype.update=function(){var e=this.fit,t=this.table.columns,i=this.table.$el.clientWidth,n=0,s=[];t.forEach(function(e){e.isColumnGroup?s.push.apply(s,e.columns):s.push(e)});var a=s.filter(function(e){return"number"!=typeof e.width});if(a.length>0&&e){if(s.forEach(function(e){n+=e.width||e.minWidth||80}),ni,this.bodyWidth=n;var o=this.store.states.fixedColumns;if(o.length>0){var l=0;o.forEach(function(e){l+=e.realWidth}),this.fixedWidth=l}var u=this.store.states.rightFixedColumns;if(u.length>0){var c=0;u.forEach(function(e){c+=e.realWidth}),this.rightFixedWidth=c}},e}();t.default=r},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(38),a=i(4),r=i(14),o=n(r),l=i(39),u=n(l),c=i(13),d=n(c);t.default={components:{ElCheckbox:o.default,ElTooltip:u.default},props:{store:{required:!0},stripe:Boolean,context:{},layout:{required:!0},rowClassName:[String,Function],rowStyle:[Object,Function],fixed:String,highlight:Boolean},render:function(e){var t=this,i=this.columns.map(function(e,i){return t.isColumnHidden(i)});return e("table",{class:"el-table__body",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])})]),e("tbody",null,[this._l(this.data,function(n,s){return[e("tr",{style:t.rowStyle?t.getRowStyle(n,s):null,key:t.table.rowKey?t.getKeyOfRow(n,s):s,on:{dblclick:function(e){return t.handleDoubleClick(e,n)},click:function(e){return t.handleClick(e,n)},contextmenu:function(e){return t.handleContextMenu(e,n)},mouseenter:function(e){return t.handleMouseEnter(s)},mouseleave:function(e){return t.handleMouseLeave()}},class:[t.getRowClass(n,s)]},[t._l(t.columns,function(a,r){return e("td",{class:[a.id,a.align,a.className||"",i[r]?"is-hidden":""],on:{mouseenter:function(e){return t.handleCellMouseEnter(e,n)},mouseleave:t.handleCellMouseLeave}},[a.renderCell.call(t._renderProxy,e,{row:n,column:a,$index:s,store:t.store,_self:t.context||t.table.$vnode.context},i[r])])}),!t.fixed&&t.layout.scrollY&&t.layout.gutterWidth?e("td",{class:"gutter"},[]):""]),t.store.states.expandRows.indexOf(n)>-1?e("tr",null,[e("td",{attrs:{colspan:t.columns.length},class:"el-table__expanded-cell"},[t.table.renderExpanded?t.table.renderExpanded(e,{row:n,$index:s,store:t.store}):""])]):""]}).concat(this._self.$parent.$slots.append).concat(e("el-tooltip",{attrs:{effect:this.table.tooltipEffect,placement:"top",content:this.tooltipContent},ref:"tooltip"},[]))])])},watch:{"store.states.hoverRow":function(e,t){if(this.store.states.isComplex){var i=this.$el;if(i){var n=i.querySelectorAll("tbody > tr.el-table__row"),s=n[t],r=n[e];s&&(0,a.removeClass)(s,"hover-row"),r&&(0,a.addClass)(r,"hover-row")}}},"store.states.currentRow":function(e,t){if(this.highlight){var i=this.$el;if(i){var n=this.store.states.data,s=i.querySelectorAll("tbody > tr.el-table__row"),r=s[n.indexOf(t)],o=s[n.indexOf(e)];r?(0,a.removeClass)(r,"current-row"):s&&[].forEach.call(s,function(e){return(0,a.removeClass)(e,"current-row")}),o&&(0,a.addClass)(o,"current-row")}}}},computed:{table:function(){return this.$parent},data:function(){return this.store.states.data},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},data:function(){return{tooltipContent:""}},created:function(){this.activateTooltip=(0,d.default)(50,function(e){return e.handleShowPopper()})},methods:{getKeyOfRow:function(e,t){var i=this.table.rowKey;return i?(0,s.getRowIdentity)(e,i):t},isColumnHidden:function(e){return!0===this.fixed||"left"===this.fixed?e>=this.leftFixedCount:"right"===this.fixed?e=this.columnsCount-this.rightFixedCount},getRowStyle:function(e,t){var i=this.rowStyle;return"function"==typeof i?i.call(null,e,t):i},getRowClass:function(e,t){var i=["el-table__row"];this.stripe&&t%2==1&&i.push("el-table__row--striped");var n=this.rowClassName;return"string"==typeof n?i.push(n):"function"==typeof n&&i.push(n.call(null,e,t)||""),i.join(" ")},handleCellMouseEnter:function(e,t){var i=this.table,n=(0,s.getCell)(e);if(n){var r=(0,s.getColumnByCell)(i,n),o=i.hoverState={cell:n,column:r,row:t};i.$emit("cell-mouse-enter",o.row,o.column,o.cell,e)}var l=e.target.querySelector(".cell");if((0,a.hasClass)(l,"el-tooltip")&&l.scrollWidth>l.offsetWidth){var u=this.$refs.tooltip;this.tooltipContent=n.innerText,u.referenceElm=n,u.$refs.popper&&(u.$refs.popper.style.display="none"),u.doDestroy(),u.setExpectedState(!0),this.activateTooltip(u)}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;if(t&&(t.setExpectedState(!1),t.handleClosePopper()),(0,s.getCell)(e)){var i=this.table.hoverState;this.table.$emit("cell-mouse-leave",i.row,i.column,i.cell,e)}},handleMouseEnter:function(e){this.store.commit("setHoverRow",e)},handleMouseLeave:function(){this.store.commit("setHoverRow",null)},handleContextMenu:function(e,t){this.handleEvent(e,t,"contextmenu")},handleDoubleClick:function(e,t){this.handleEvent(e,t,"dblclick")},handleClick:function(e,t){this.store.commit("setCurrentRow",t),this.handleEvent(e,t,"click")},handleEvent:function(e,t,i){var n=this.table,a=(0,s.getCell)(e),r=void 0;a&&(r=(0,s.getColumnByCell)(n,a))&&n.$emit("cell-"+i,t,r,a,e),n.$emit("row-"+i,t,e,r)},handleExpandClick:function(e){this.store.commit("toggleRowExpanded",e)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(10),a=n(s),r=i(13),o=n(r),l=i(30),u=i(2),c=n(u);t.default={name:"ElTooltip",mixins:[a.default],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},popperClass:String,content:String,visibleArrow:{default:!0},transition:{type:String,default:"el-fade-in-linear"},popperOptions:{default:function(){return{boundariesPadding:10,gpuAcceleration:!1}}},enterable:{type:Boolean,default:!0},hideAfter:{type:Number,default:0}},data:function(){return{timeoutPending:null}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new c.default({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=(0,o.default)(200,function(){return e.handleClosePopper()}))},render:function(e){var t=this;if(this.popperVM&&(this.popperVM.node=e("transition",{attrs:{name:this.transition},on:{afterLeave:this.doDestroy}},[e("div",{on:{mouseleave:function(){t.setExpectedState(!1),t.debounceClose()},mouseenter:function(){t.setExpectedState(!0)}},ref:"popper",directives:[{name:"show",value:!this.disabled&&this.showPopper}],class:["el-tooltip__popper","is-"+this.effect,this.popperClass]},[this.$slots.content||this.content])])),!this.$slots.default||!this.$slots.default.length)return this.$slots.default;var i=(0,l.getFirstComponentChild)(this.$slots.default);if(!i)return i;var n=i.data=i.data||{},s=i.data.on=i.data.on||{},a=i.data.nativeOn=i.data.nativeOn||{};return n.staticClass=this.concatClass(n.staticClass,"el-tooltip"),s.mouseenter=this.addEventHandle(s.mouseenter,this.show),s.mouseleave=this.addEventHandle(s.mouseleave,this.hide),a.mouseenter=this.addEventHandle(a.mouseenter,this.show),a.mouseleave=this.addEventHandle(a.mouseleave,this.hide),i},mounted:function(){this.referenceElm=this.$el},methods:{show:function(){this.setExpectedState(!0),this.handleShowPopper()},hide:function(){this.setExpectedState(!1),this.debounceClose()},addEventHandle:function(e,t){return e?Array.isArray(e)?e.indexOf(t)>-1?e:e.concat(t):e===t?e:[e,t]:t},concatClass:function(e,t){return e&&e.indexOf(t)>-1?e:e?t?e+" "+t:e:t||""},handleShowPopper:function(){var e=this;this.expectedState&&!this.manual&&(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.showPopper=!0},this.openDelay),this.hideAfter>0&&(this.timeoutPending=setTimeout(function(){e.showPopper=!1},this.hideAfter)))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.timeoutPending&&clearTimeout(this.timeoutPending),this.showPopper=!1)},setExpectedState:function(e){!1===e&&clearTimeout(this.timeoutPending),this.expectedState=e}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(4),a=i(14),r=n(a),o=i(27),l=n(o),u=i(2),c=n(u),d=i(202),h=n(d),f=function e(t){var i=[];return t.forEach(function(t){t.children?(i.push(t),i.push.apply(i,e(t.children))):i.push(t)}),i},p=function(e){var t=1,i=function e(i,n){if(n&&(i.level=n.level+1,t1;return s&&(this.$parent.isGroup=!0),e("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])}),!this.fixed&&this.layout.gutterWidth?e("col",{attrs:{name:"gutter",width:this.layout.scrollY?this.layout.gutterWidth:""}},[]):""]),e("thead",{class:[{"is-group":s,"has-gutter":this.hasGutter}]},[this._l(n,function(i,n){return e("tr",null,[t._l(i,function(s,a){return e("th",{attrs:{colspan:s.colSpan,rowspan:s.rowSpan},on:{mousemove:function(e){return t.handleMouseMove(e,s)},mouseout:t.handleMouseOut,mousedown:function(e){return t.handleMouseDown(e,s)},click:function(e){return t.handleHeaderClick(e,s)}},class:[s.id,s.order,s.headerAlign,s.className||"",0===n&&t.isCellHidden(a,i)?"is-hidden":"",s.children?"":"is-leaf",s.labelClassName,s.sortable?"is-sortable":""]},[e("div",{class:["cell",s.filteredValue&&s.filteredValue.length>0?"highlight":"",s.labelClassName]},[s.renderHeader?s.renderHeader.call(t._renderProxy,e,{column:s,$index:a,store:t.store,_self:t.$parent.$vnode.context}):s.label,s.sortable?e("span",{class:"caret-wrapper",on:{click:function(e){return t.handleSortClick(e,s)}}},[e("span",{class:"sort-caret ascending",on:{click:function(e){return t.handleSortClick(e,s,"ascending")}}},[e("i",{class:"el-icon-sort-up"},[])]),e("span",{class:"sort-caret descending",on:{click:function(e){return t.handleSortClick(e,s,"descending")}}},[e("i",{class:"el-icon-sort-down"},[])])]):"",s.filterable?e("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return t.handleFilterClick(e,s)}}},[e("i",{class:["el-icon-arrow-down",s.filterOpened?"el-icon-arrow-up":""]},[])]):""])])}),t.hasGutter?e("th",{class:"gutter",style:{width:t.layout.scrollY?t.layout.gutterWidth+"px":"0"}},[]):""])})])])},props:{fixed:String,store:{required:!0},layout:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:r.default,ElTag:l.default},computed:{isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns},hasGutter:function(){return!this.fixed&&this.layout.gutterWidth}},created:function(){this.filterPanels={}},mounted:function(){var e=this;this.defaultSort.prop&&function(){var t=e.store.states;t.sortProp=e.defaultSort.prop,t.sortOrder=e.defaultSort.order||"ascending",e.$nextTick(function(i){for(var n=0,s=e.columns.length;n=this.leftFixedCount;if("right"===this.fixed){for(var i=0,n=0;n=this.columnsCount-this.rightFixedCount},toggleAllSelection:function(){this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var i=e.target,n=i.parentNode,s=this.$parent,a=this.filterPanels[t.id];if(a&&t.filterOpened)return void(a.showPopper=!1);a||(a=new c.default(h.default),this.filterPanels[t.id]=a,t.filterPlacement&&(a.placement=t.filterPlacement),a.table=s,a.cell=n,a.column=t,!this.$isServer&&a.$mount(document.createElement("div"))),setTimeout(function(){a.showPopper=!0},16)},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filters&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleMouseDown:function(e,t){var i=this;this.$isServer||t.children&&t.children.length>0||this.draggingColumn&&this.border&&function(){i.dragging=!0,i.$parent.resizeProxyVisible=!0;var n=i.$parent,a=n.$el,r=a.getBoundingClientRect().left,o=i.$el.querySelector("th."+t.id),l=o.getBoundingClientRect(),u=l.left-r+30;(0,s.addClass)(o,"noclick"),i.dragState={startMouseLeft:e.clientX,startLeft:l.right-r,startColumnLeft:l.left-r,tableLeft:r};var c=n.$refs.resizeProxy;c.style.left=i.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var d=function(e){var t=e.clientX-i.dragState.startMouseLeft,n=i.dragState.startLeft+t;c.style.left=Math.max(u,n)+"px"},h=function a(){if(i.dragging){var r=i.dragState,l=r.startColumnLeft,u=r.startLeft,h=parseInt(c.style.left,10),f=h-l;t.width=t.realWidth=f,n.$emit("header-dragend",t.width,u-l,t,e),i.store.scheduleLayout(),document.body.style.cursor="",i.dragging=!1,i.draggingColumn=null,i.dragState={},n.resizeProxyVisible=!1}document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",a),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){(0,s.removeClass)(o,"noclick")},0)};document.addEventListener("mousemove",d),document.addEventListener("mouseup",h)}()},handleMouseMove:function(e,t){if(!(t.children&&t.children.length>0)){for(var i=e.target;i&&"TH"!==i.tagName;)i=i.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var n=i.getBoundingClientRect(),a=document.body.style;n.width>12&&n.right-e.pageX<8?(a.cursor="col-resize",(0,s.hasClass)(i,"is-sortable")&&(i.style.cursor="col-resize"),this.draggingColumn=t):this.dragging||(a.cursor="",(0,s.hasClass)(i,"is-sortable")&&(i.style.cursor="pointer"),this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){return e?"ascending"===e?"descending":null:"ascending"},handleSortClick:function(e,t,i){e.stopPropagation();for(var n=i||this.toggleOrder(t.order),a=e.target;a&&"TH"!==a.tagName;)a=a.parentNode;if(a&&"TH"===a.tagName&&(0,s.hasClass)(a,"noclick"))return void(0,s.removeClass)(a,"noclick");if(t.sortable){var r=this.store.states,o=r.sortProp,l=void 0,u=r.sortingColumn;u!==t&&(u&&(u.order=null),r.sortingColumn=t,o=t.property),n?l=t.order=n:(l=t.order=null,r.sortingColumn=null,o=null),r.sortProp=o,r.sortOrder=l,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(203),s=i.n(n),a=i(205),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(10),a=n(s),r=i(18),o=i(5),l=n(o),u=i(16),c=n(u),d=i(204),h=n(d),f=i(14),p=n(f),m=i(37),v=n(m);t.default={name:"ElTableFilterPanel",mixins:[a.default,l.default],directives:{Clickoutside:c.default},components:{ElCheckbox:p.default,ElCheckboxGroup:v.default},props:{placement:{type:String,default:"bottom-end"}},customRender:function(e){return e("div",{class:"el-table-filter"},[e("div",{class:"el-table-filter__content"},[]),e("div",{class:"el-table-filter__bottom"},[e("button",{on:{click:this.handleConfirm}},[this.t("el.table.confirmFilter")]),e("button",{on:{click:this.handleReset}},[this.t("el.table.resetFilter")])])])},methods:{isActive:function(e){return e.value===this.filterValue},handleOutsideClick:function(){this.showPopper=!1},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){this.filterValue=e,void 0!==e&&null!==e?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e})}},data:function(){return{table:null,cell:null,column:null}},computed:{filters:function(){return this.column&&this.column.filters},filterValue:{get:function(){return(this.column.filteredValue||[])[0]},set:function(e){this.filteredValue&&(void 0!==e&&null!==e?this.filteredValue.splice(0,1,e):this.filteredValue.splice(0,1))}},filteredValue:{get:function(){return this.column?this.column.filteredValue||[]:[]},set:function(e){this.column&&(this.column.filteredValue=e)}},multiple:function(){return!this.column||this.column.filterMultiple}},mounted:function(){var e=this;this.popperElm=this.$el,this.referenceElm=this.cell,this.table.bodyWrapper.addEventListener("scroll",function(){e.updatePopper()}),this.$watch("showPopper",function(t){e.column&&(e.column.filterOpened=t),t?h.default.open(e):h.default.close(e)})},watch:{showPopper:function(e){!0===e&&parseInt(this.popperJS._popper.style.zIndex,10)=this.leftFixedCount;if("right"===this.fixed){for(var i=0,n=0;n=this.columnsCount-this.rightFixedCount}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-table",class:{"el-table--fit":e.fit,"el-table--striped":e.stripe,"el-table--border":e.border||e.isGroup,"el-table--hidden":e.isHidden,"el-table--group":e.isGroup,"el-table--fluid-height":e.maxHeight,"el-table--enable-row-hover":!e.store.states.isComplex,"el-table--enable-row-transition":0!==(e.store.states.data||[]).length&&(e.store.states.data||[]).length<100},on:{mouseleave:function(t){e.handleMouseLeave(t)}}},[i("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[e._t("default")],2),e.showHeader?i("div",{ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[i("table-header",{style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,layout:e.layout,border:e.border,"default-sort":e.defaultSort}})],1):e._e(),i("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",class:["is-scroll-"+e.scrollPosition],style:[e.bodyHeight]},[i("table-body",{style:{width:e.bodyWidth},attrs:{context:e.context,store:e.store,stripe:e.stripe,layout:e.layout,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}}),e.data&&0!==e.data.length?e._e():i("div",{staticClass:"el-table__empty-block",style:{width:e.bodyWidth}},[i("span",{staticClass:"el-table__empty-text"},[e._t("empty",[e._v(e._s(e.emptyText||e.t("el.table.emptyText")))])],2)])],1),e.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"}],ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[i("table-footer",{style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,layout:e.layout,border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,"default-sort":e.defaultSort}})],1):e._e(),e.fixedColumns.length>0?i("div",{ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},e.fixedHeight]},[e.showHeader?i("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",border:e.border,store:e.store,layout:e.layout}})],1):e._e(),i("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[i("table-body",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",store:e.store,stripe:e.stripe,layout:e.layout,highlight:e.highlightCurrentRow,"row-class-name":e.rowClassName,"row-style":e.rowStyle}})],1),e.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"}],ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store,layout:e.layout}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?i("div",{ref:"rightFixedWrapper",staticClass:"el-table__fixed-right",style:[{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},{right:e.layout.scrollY?(e.border?e.layout.gutterWidth:e.layout.gutterWidth||0)+"px":""},e.fixedHeight]},[e.showHeader?i("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",border:e.border,store:e.store,layout:e.layout}})],1):e._e(),i("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[i("table-body",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",store:e.store,stripe:e.stripe,layout:e.layout,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}})],1),e.showSummary?i("div",{directives:[{name:"show",rawName:"v-show",value:e.data&&e.data.length>0,expression:"data && data.length > 0"}],ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store,layout:e.layout}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?i("div",{staticClass:"el-table__fixed-right-patch",style:{width:e.layout.scrollY?e.layout.gutterWidth+"px":"0",height:e.layout.headerHeight+"px"}}):e._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:e.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(209),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){if(null==e)throw new TypeError("Cannot destructure undefined")}t.__esModule=!0;var a=i(14),r=n(a),o=i(27),l=n(o),u=i(15),c=n(u),d=i(9),h=1,f={default:{order:""},selection:{width:48,minWidth:48,realWidth:48,order:"",className:"el-table-column--selection"},expand:{width:48,minWidth:48,realWidth:48,order:""},index:{width:48,minWidth:48,realWidth:48,order:""}},p={selection:{renderHeader:function(e){return e("el-checkbox",{nativeOn:{click:this.toggleAllSelection},attrs:{value:this.isAllSelected}},[])},renderCell:function(e,t){var i=t.row,n=t.column,s=t.store,a=t.$index;return e("el-checkbox",{attrs:{value:s.isSelected(i),disabled:!!n.selectable&&!n.selectable.call(null,i,a)},on:{input:function(){s.commit("rowSelectedChanged",i)}}},[])},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){return t.column.label||"#"},renderCell:function(e,t){return e("div",null,[t.$index+1])},sortable:!1},expand:{renderHeader:function(e,t){return s(t),""},renderCell:function(e,t,i){var n=t.row;return e("div",{class:"el-table__expand-icon "+(t.store.states.expandRows.indexOf(n)>-1?"el-table__expand-icon--expanded":""),on:{click:function(){return i.handleExpandClick(n)}}},[e("i",{class:"el-icon el-icon-arrow-right"},[])])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},m=function(e,t){var i={};(0,c.default)(i,f[e||"default"]);for(var n in t)if(t.hasOwnProperty(n)){var s=t[n];void 0!==s&&(i[n]=s)}return i.minWidth||(i.minWidth=80),i.realWidth=i.width||i.minWidth,i},v=function(e,t){var i=t.row,n=t.column,s=n.property,a=s&&-1===s.indexOf(".")?i[s]:(0,d.getValueByPath)(i,s);return n&&n.formatter?n.formatter(i,n,a):a};t.default={name:"ElTableColumn",props:{type:{type:String,default:"default"},label:String,className:String,labelClassName:String,property:String,prop:String,width:{},minWidth:{},renderHeader:Function,sortable:{type:[String,Boolean],default:!1},sortMethod:Function,resizable:{type:Boolean,default:!0},context:{},columnKey:String,align:String,headerAlign:String,showTooltipWhenOverflow:Boolean,showOverflowTooltip:Boolean,fixed:[Boolean,String],formatter:Function,selectable:Function,reserveSelection:Boolean,filterMethod:Function,filteredValue:Array,filters:Array,filterPlacement:String,filterMultiple:{type:Boolean,default:!0}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:r.default,ElTag:l.default},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e}},created:function(){var e=this;this.customRender=this.$options.render,this.$options.render=function(t){return t("div",e.$slots.default)},this.columnId=(this.$parent.tableId||this.$parent.columnId+"_")+"column_"+h++;var t=this.$parent,i=this.owner;this.isSubColumn=i!==t;var n=this.type,s=this.width;void 0!==s&&(s=parseInt(s,10),isNaN(s)&&(s=null));var a=this.minWidth;void 0!==a&&(a=parseInt(a,10),isNaN(a)&&(a=80));var r=m(n,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:n,renderCell:null,renderHeader:this.renderHeader,minWidth:a,width:s,isColumnGroup:!1,context:this.context,align:this.align?"is-"+this.align:null,headerAlign:this.headerAlign?"is-"+this.headerAlign:this.align?"is-"+this.align:null,sortable:""===this.sortable||this.sortable,sortMethod:this.sortMethod,resizable:this.resizable,showOverflowTooltip:this.showOverflowTooltip||this.showTooltipWhenOverflow,formatter:this.formatter,selectable:this.selectable,reserveSelection:this.reserveSelection,fixed:""===this.fixed||this.fixed,filterMethod:this.filterMethod,filters:this.filters,filterable:this.filters||this.filterMethod,filterMultiple:this.filterMultiple,filterOpened:!1,filteredValue:this.filteredValue||[],filterPlacement:this.filterPlacement||""});(0,c.default)(r,p[n]||{}),this.columnConfig=r;var o=r.renderCell,l=this;if("expand"===n)return i.renderExpanded=function(e,t){return l.$scopedSlots.default?l.$scopedSlots.default(t):l.$slots.default},void(r.renderCell=function(e,t){return e("div",{class:"cell"},[o(e,t,this._renderProxy)])});r.renderCell=function(e,t){return l.$scopedSlots.default&&(o=function(){return l.$scopedSlots.default(t)}),o||(o=v),l.showOverflowTooltip||l.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip",style:"width:"+(t.column.realWidth||t.column.width)+"px"},[o(e,t)]):e("div",{class:"cell"},[o(e,t)])}},destroyed:function(){this.$parent&&this.owner.store.commit("removeColumn",this.columnConfig)},watch:{label:function(e){this.columnConfig&&(this.columnConfig.label=e)},prop:function(e){this.columnConfig&&(this.columnConfig.property=e)},property:function(e){this.columnConfig&&(this.columnConfig.property=e)},filters:function(e){this.columnConfig&&(this.columnConfig.filters=e)},filterMultiple:function(e){this.columnConfig&&(this.columnConfig.filterMultiple=e)},align:function(e){this.columnConfig&&(this.columnConfig.align=e?"is-"+e:null,this.headerAlign||(this.columnConfig.headerAlign=e?"is-"+e:null))},headerAlign:function(e){this.columnConfig&&(this.columnConfig.headerAlign="is-"+(e||this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=e,this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=e,this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout())},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)}},mounted:function(){var e=this.owner,t=this.$parent,i=void 0;i=this.isSubColumn?[].indexOf.call(t.$el.children,this.$el):[].indexOf.call(t.$refs.hiddenColumns.children,this.$el),e.store.commit("insertColumn",this.columnConfig,i,this.isSubColumn?t.columnConfig:null)}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(211),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(40),a=n(s),r=i(214),o=n(r),l=i(229),u=n(l),c=function(e){return"daterange"===e||"datetimerange"===e?u.default:o.default};t.default={mixins:[a.default],name:"ElDatePicker",props:{type:{type:String,default:"date"},timeArrowControl:Boolean},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=c(e),this.mountPicker()):this.panel=c(e)}},created:function(){this.panel=c(this.type)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),a=n(s),r=i(16),o=n(r),l=i(11),u=i(10),c=n(u),d=i(1),h=n(d),f=i(22),p=n(f),m=i(7),v=n(m),g=i(15),y=n(g),b={props:{appendToBody:c.default.props.appendToBody,offset:c.default.props.offset,boundariesPadding:c.default.props.boundariesPadding},methods:c.default.methods,data:function(){return(0,y.default)({visibleArrow:!0},c.default.data)},beforeDestroy:c.default.beforeDestroy},_={date:"yyyy-MM-dd",month:"yyyy-MM",datetime:"yyyy-MM-dd HH:mm:ss",time:"HH:mm:ss",week:"yyyywWW",timerange:"HH:mm:ss",daterange:"yyyy-MM-dd",datetimerange:"yyyy-MM-dd HH:mm:ss",year:"yyyy"},C=["date","datetime","time","time-select","week","month","year","daterange","timerange","datetimerange"],x=function(e,t){return(0,l.formatDate)(e,t)},w=function(e,t){return(0,l.parseDate)(e,t)},k=function(e,t){if(Array.isArray(e)&&2===e.length){var i=e[0],n=e[1];if(i&&n)return[(0,l.formatDate)(i,t),(0,l.formatDate)(n,t)]}return""},S=function(e,t,i){if(Array.isArray(e)||(e=e.split(i)),2===e.length){var n=e[0],s=e[1];return[(0,l.parseDate)(n,t),(0,l.parseDate)(s,t)]}return[]},M={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var i=(0,l.formatDate)(e,t),n=(0,l.getWeekNumber)(e);return i=/WW/.test(i)?i.replace(/WW/,n<10?"0"+n:n):i.replace(/W/,n)},parser:function(e){var t=(e||"").split("w");if(2===t.length){var i=Number(t[0]),n=Number(t[1]);if(!isNaN(i)&&!isNaN(n)&&n<54)return e}return null}},date:{formatter:x,parser:w},datetime:{formatter:x,parser:w},daterange:{formatter:k,parser:S},datetimerange:{formatter:k,parser:S},timerange:{formatter:k,parser:S},time:{formatter:x,parser:w},month:{formatter:x,parser:w},year:{formatter:x,parser:w},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}}},$={left:"bottom-start",center:"bottom",right:"bottom-end"},D=function(e,t,i){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"-";return e?(0,(M[i]||M.default).parser)(e,t||_[i],n):null},E=function(e,t,i){return e?(0,(M[i]||M.default).formatter)(e,t||_[i]):null},T=function(e,t){var i=e instanceof Array,n=t instanceof Array;return i&&n?new Date(e[0]).getTime()===new Date(t[0]).getTime()&&new Date(e[1]).getTime()===new Date(t[1]).getTime():!i&&!n&&new Date(e).getTime()===new Date(t).getTime()};t.default={mixins:[h.default,b,(0,p.default)("reference")],inject:{elFormItem:{default:""}},props:{size:String,format:String,valueFormat:String,readonly:Boolean,placeholder:String,startPlaceholder:String,endPlaceholder:String,name:String,disabled:Boolean,clearable:{type:Boolean,default:!0},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},rangeSeparator:{default:"-"},pickerOptions:{}},components:{ElInput:v.default},directives:{Clickoutside:o.default},data:function(){return{pickerVisible:!1,showClose:!1,userInput:null,valueOnOpen:null,unwatchPickerOptions:null}},watch:{pickerVisible:function(e){if(!this.readonly&&!this.disabled)if(e)this.showPicker(),this.valueOnOpen=this.value;else{this.hidePicker(),this.emitChange(this.value);var t=this.parseString(this.displayValue);this.userInput&&t&&this.isValidValue(t)&&(this.userInput=null),this.dispatch("ElFormItem","el.form.blur"),this.blur()}},parsedValue:{immediate:!0,handler:function(e){this.picker&&(this.picker.value=e)}},defaultValue:function(e){this.picker&&(this.picker.defaultValue=e)}},computed:{ranged:function(){return this.type.indexOf("range")>-1},reference:function(){var e=this.$refs.reference;return e.$el||e},refInput:function(){return this.reference?[].slice.call(this.reference.querySelectorAll("input")):[]},valueIsEmpty:function(){var e=this.value;if(Array.isArray(e)){for(var t=0,i=e.length;t0&&void 0!==arguments[0]?arguments[0]:"",i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];e.userInput=null,e.pickerVisible=e.picker.visible=i,e.emitInput(t),e.picker.resetView&&e.picker.resetView()}),this.picker.$on("select-range",function(t,i,n){0!==e.refInput.length&&(n&&"min"!==n?"max"===n&&(e.refInput[1].setSelectionRange(t,i),e.refInput[1].focus()):(e.refInput[0].setSelectionRange(t,i),e.refInput[0].focus()))})},unmountPicker:function(){this.picker&&(this.picker.$destroy(),this.picker.$off(),"function"==typeof this.unwatchPickerOptions&&this.unwatchPickerOptions(),this.picker.$el.parentNode.removeChild(this.picker.$el))},emitChange:function(e){var t=this.formatToValue(e);T(this.valueOnOpen,t)||(this.$emit("change",t),this.dispatch("ElFormItem","el.form.change",t),this.valueOnOpen=t)},emitInput:function(e){var t=this.formatToValue(e);T(this.value,t)||this.$emit("input",t)},isValidValue:function(e){return this.picker||this.mountPicker(),!this.picker.isValidValue||e&&this.picker.isValidValue(e)}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return e.ranged?i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor el-range-editor el-input__inner",class:["el-date-editor--"+e.type,"el-range-editor--"+e.pickerSize,e.pickerVisible?"is-active":""],on:{click:e.handleRangeClick,mouseenter:e.handleMouseEnter,mouseleave:function(t){e.showClose=!1},keydown:e.handleKeydown}},[i("i",{class:["el-input__icon","el-range__icon",e.triggerClass]}),i("input",{staticClass:"el-range-input",attrs:{placeholder:e.startPlaceholder},domProps:{value:e.displayValue&&e.displayValue[0]},on:{input:e.handleStartInput,change:e.handleStartChange,focus:e.handleFocus}}),i("span",{staticClass:"el-range-separator"},[e._v(e._s(e.rangeSeparator))]),i("input",{staticClass:"el-range-input",attrs:{placeholder:e.endPlaceholder},domProps:{value:e.displayValue&&e.displayValue[1]},on:{input:e.handleEndInput,change:e.handleEndChange,focus:e.handleFocus}}),e.haveTrigger?i("i",{staticClass:"el-input__icon el-range__close-icon",class:{"el-icon-circle-close":e.showClose},on:{click:e.handleClickIcon}}):e._e()]):i("el-input",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor",class:"el-date-editor--"+e.type,attrs:{readonly:!e.editable||e.readonly,disabled:e.disabled,size:e.pickerSize,name:e.name,placeholder:e.placeholder,value:e.displayValue,validateEvent:!1,"prefix-icon":e.triggerClass},on:{focus:e.handleFocus,blur:e.handleBlur,input:function(t){return e.userInput=t}},nativeOn:{keydown:function(t){e.handleKeydown(t)},mouseenter:function(t){e.handleMouseEnter(t)},mouseleave:function(t){e.showClose=!1},change:function(t){e.handleChange(t)}}},[e.haveTrigger?i("i",{staticClass:"el-input__icon",class:{"el-icon-circle-close":e.showClose},attrs:{slot:"suffix"},on:{click:e.handleClickIcon},slot:"suffix"}):e._e()])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(215),s=i.n(n),a=i(228),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(11),a=i(5),r=n(a),o=i(7),l=n(o),u=i(41),c=n(u),d=i(220),h=n(d),f=i(223),p=n(f),m=i(59),v=n(m);t.default={mixins:[r.default],watch:{showTime:function(e){var t=this;e&&this.$nextTick(function(e){var i=t.$refs.input.$el;i&&(t.pickerWidth=i.getBoundingClientRect().width+10)})},value:function(e){(0,s.isDate)(e)?this.date=new Date(e):this.date=this.defaultValue?new Date(this.defaultValue):new Date},defaultValue:function(e){(0,s.isDate)(this.value)||(this.date=e?new Date(e):new Date)},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.adjustSpinners()})},selectionMode:function(e){"month"===e&&("year"===this.currentView&&"month"===this.currentView||(this.currentView="month"))}},methods:{proxyTimePickerDataProperties:function(){var e=this,t=function(t){e.$refs.timepicker.format=t},i=function(t){e.$refs.timepicker.value=t},n=function(t){e.$refs.timepicker.date=t};this.$watch("format",t),this.$watch("value",i),this.$watch("date",n),t(this.timeFormat),i(this.value),n(this.date)},handleClear:function(){this.date=this.defaultValue?new Date(this.defaultValue):new Date,this.$emit("pick")},emit:function(e){for(var t=arguments.length,i=Array(t>1?t-1:0),n=1;n0&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var i=(0,s.clearMilliseconds)((0,s.limitTimeRange)(this.date,this.selectableRange,this.format));this.$emit("pick",i,e,t)}},handleKeydown:function(e){var t=e.keyCode,i={38:-1,40:1,37:-1,39:1};if(37===t||39===t){var n=i[t];return this.changeSelectionRange(n),void e.preventDefault()}if(38===t||40===t){var s=i[t];return this.$refs.spinner.scrollDown(s),void e.preventDefault()}},isValidValue:function(e){return(0,s.timeWithinRange)(e,this.selectableRange,this.format)},adjustSpinners:function(){return this.$refs.spinner.adjustSpinners()},changeSelectionRange:function(e){var t=[0,3].concat(this.showSeconds?[6]:[]),i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=t.indexOf(this.selectionRange[0]),s=(n+e+t.length)%t.length;this.$refs.spinner.emitSelectRange(i[s])}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(11),a=i(23),r=n(a),o=i(57),l=n(o);t.default={components:{ElScrollbar:r.default},directives:{repeatClick:l.default},props:{date:{},defaultValue:{},showSeconds:{type:Boolean,default:!0},arrowControl:Boolean},computed:{hours:function(){return this.date.getHours()},minutes:function(){return this.date.getMinutes()},seconds:function(){return this.date.getSeconds()},hoursList:function(){return(0,s.getRangeHours)(this.selectableRange)},arrowHourList:function(){var e=this.hours;return[e>0?e-1:void 0,e,e<23?e+1:void 0]},arrowMinuteList:function(){var e=this.minutes;return[e>0?e-1:void 0,e,e<59?e+1:void 0]},arrowSecondList:function(){var e=this.seconds;return[e>0?e-1:void 0,e,e<59?e+1:void 0]}},data:function(){return{selectableRange:[],currentScrollbar:null}},mounted:function(){var e=this;this.$nextTick(function(){!e.arrowControl&&e.bindScrollEvent()})},methods:{increase:function(){this.scrollDown(1)},decrease:function(){this.scrollDown(-1)},modifyDateField:function(e,t){switch(e){case"hours":this.$emit("change",(0,s.modifyTime)(this.date,t,this.minutes,this.seconds));break;case"minutes":this.$emit("change",(0,s.modifyTime)(this.date,this.hours,t,this.seconds));break;case"seconds":this.$emit("change",(0,s.modifyTime)(this.date,this.hours,this.minutes,t))}},handleClick:function(e,t){var i=t.value;t.disabled||(this.modifyDateField(e,i),this.emitSelectRange(e),this.adjustSpinner(e,i))},emitSelectRange:function(e){"hours"===e?(this.$emit("select-range",0,2),this.adjustSpinner("minutes",this.minutes),this.adjustSpinner("seconds",this.seconds)):"minutes"===e?(this.$emit("select-range",3,5),this.adjustSpinner("hours",this.hours),this.adjustSpinner("seconds",this.seconds)):"seconds"===e&&(this.$emit("select-range",6,8),this.adjustSpinner("minutes",this.minutes),this.adjustSpinner("hours",this.hours)),this.currentScrollbar=e},bindScrollEvent:function(){var e=this,t=function(t){e.$refs[t].wrap.onscroll=function(i){e.handleScroll(t,i)}};t("hours"),t("minutes"),t("seconds")},handleScroll:function(e){var t=Math.min(Math.floor((this.$refs[e].wrap.scrollTop-80)/32+3),"hours"===e?23:59);this.modifyDateField(e,t)},adjustSpinners:function(){this.adjustSpinner("hours",this.hours),this.adjustSpinner("minutes",this.minutes),this.adjustSpinner("seconds",this.seconds)},adjustSpinner:function(e,t){if(!this.arrowControl){var i=this.$refs[e].wrap;i&&(i.scrollTop=Math.max(0,32*(t-2.5)+80))}},scrollDown:function(e){this.currentScrollbar||this.emitSelectRange("hours");var t=this.currentScrollbar,i=this.hoursList,n=this[t];if("hours"===this.currentScrollbar){var s=Math.abs(e);e=e>0?1:-1;for(var a=i.length;a--&&s;)n=(n+e+i.length)%i.length,i[n]||s--;if(i[n])return}else n=(n+e+60)%60;this.modifyDateField(t,n),this.adjustSpinner(t,n)}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-time-spinner",class:{"has-seconds":e.showSeconds}},[e.arrowControl?e._e():[i("el-scrollbar",{ref:"hours",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("hours")}}},e._l(e.hoursList,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.hours,disabled:t},attrs:{"track-by":"hour"},on:{click:function(i){e.handleClick("hours",{value:n,disabled:t})}}},[e._v(e._s(("0"+n).slice(-2)))])})),i("el-scrollbar",{ref:"minutes",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("minutes")}}},e._l(60,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.minutes},on:{click:function(t){e.handleClick("minutes",{value:n,disabled:!1})}}},[e._v(e._s(("0"+n).slice(-2)))])})),i("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.showSeconds,expression:"showSeconds"}],ref:"seconds",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("seconds")}}},e._l(60,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.seconds},on:{click:function(t){e.handleClick("seconds",{value:n,disabled:!1})}}},[e._v(e._s(("0"+n).slice(-2)))])}))],e.arrowControl?[i("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(t){e.emitSelectRange("hours")}}},[i("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),i("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),i("ul",{ref:"hours",staticClass:"el-time-spinner__list"},e._l(e.arrowHourList,function(t){return i("li",{staticClass:"el-time-spinner__item",class:{active:t===e.hours,disabled:e.hoursList[t]}},[e._v("\n "+e._s(void 0===t?"":("0"+t).slice(-2))+"\n ")])}))]),i("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(t){e.emitSelectRange("minutes")}}},[i("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),i("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),i("ul",{ref:"minutes",staticClass:"el-time-spinner__list"},e._l(e.arrowMinuteList,function(t){return i("li",{staticClass:"el-time-spinner__item",class:{active:t===e.minutes}},[e._v("\n "+e._s(void 0===t?"":("0"+t).slice(-2))+"\n ")])}))]),e.showSeconds?i("div",{staticClass:"el-time-spinner__wrapper is-arrow",on:{mouseenter:function(t){e.emitSelectRange("seconds")}}},[i("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-time-spinner__arrow el-icon-arrow-up"}),i("i",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-time-spinner__arrow el-icon-arrow-down"}),i("ul",{ref:"seconds",staticClass:"el-time-spinner__list"},e._l(e.arrowSecondList,function(t){return i("li",{staticClass:"el-time-spinner__item",class:{active:t===e.seconds}},[e._v("\n "+e._s(void 0===t?"":("0"+t).slice(-2))+"\n ")])}))]):e._e()]:e._e()],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-time-panel el-popper",class:e.popperClass},[i("div",{staticClass:"el-time-panel__content",class:{"has-seconds":e.showSeconds}},[i("time-spinner",{ref:"spinner",attrs:{"arrow-control":e.useArrow,"show-seconds":e.showSeconds,date:e.date},on:{change:e.handleChange,"select-range":e.setSelectionRange}})],1),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:e.handleCancel}},[e._v(e._s(e.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn",class:{confirm:!e.disabled},attrs:{type:"button"},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(221),s=i.n(n),a=i(222),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(4),s=i(11),a=function(e){return e%400==0||e%100!=0&&e%4==0},r=function(e){var t=a(e)?366:365,i=new Date(e,0,1);return(0,s.range)(t).map(function(e){return new Date(i.getTime()+864e5)})};t.default={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&(0,s.isDate)(e)}},date:{}},computed:{startYear:function(){return 10*Math.floor(this.date.getFullYear()/10)}},methods:{getCellStyle:function(e){var t={},i=new Date;return t.disabled="function"==typeof this.disabledDate&&r(e).every(this.disabledDate),t.current=this.value.getFullYear()===e,t.today=i.getFullYear()===e,t.default=this.defaultValue&&this.defaultValue.getFullYear()===e,t},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if((0,n.hasClass)(t.parentNode,"disabled"))return;var i=t.textContent||t.innerText;this.$emit("pick",Number(i))}}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[i("tbody",[i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),i("td"),i("td")])])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(224),s=i.n(n),a=i(225),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(5),s=function(e){return e&&e.__esModule?e:{default:e}}(n),a=i(11),r=i(4),o=function(e,t){var i=(0,a.getDayCountOfMonth)(e,t),n=new Date(e,t,1);return(0,a.range)(i).map(function(e){return new Date(n.getTime()+864e5*e)})};t.default={props:{disabledDate:{},value:{},defaultValue:{validator:function(e){return null===e||e instanceof Date&&(0,a.isDate)(e)}},date:{}},mixins:[s.default],methods:{getCellStyle:function(e){var t={},i=this.date.getFullYear(),n=new Date;return t.disabled="function"==typeof this.disabledDate&&o(i,e).every(this.disabledDate),t.current=this.value.getFullYear()===i&&this.value.getMonth()===e,t.today=n.getFullYear()===i&&n.getMonth()===e,t.default=this.defaultValue&&this.defaultValue.getFullYear()===i&&this.defaultValue.getMonth()===e,t},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&!(0,r.hasClass)(t.parentNode,"disabled")){var i=t.parentNode.cellIndex,n=t.parentNode.parentNode.rowIndex,s=4*n+i;this.$emit("pick",s)}}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-month-table",on:{click:e.handleMonthTableClick}},[i("tbody",[i("tr",[i("td",{class:e.getCellStyle(0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jan")))])]),i("td",{class:e.getCellStyle(1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.feb")))])]),i("td",{class:e.getCellStyle(2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.mar")))])]),i("td",{class:e.getCellStyle(3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.apr")))])])]),i("tr",[i("td",{class:e.getCellStyle(4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.may")))])]),i("td",{class:e.getCellStyle(5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jun")))])]),i("td",{class:e.getCellStyle(6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jul")))])]),i("td",{class:e.getCellStyle(7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.aug")))])])]),i("tr",[i("td",{class:e.getCellStyle(8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.sep")))])]),i("td",{class:e.getCellStyle(9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.oct")))])]),i("td",{class:e.getCellStyle(10)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.nov")))])]),i("td",{class:e.getCellStyle(11)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.dec")))])])])])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(11),s=i(4),a=i(5),r=function(e){return e&&e.__esModule?e:{default:e}}(a),o=["sun","mon","tue","wed","thu","fri","sat"],l=function(e){var t=new Date(e);return t.setHours(0,0,0,0),t.getTime()};t.default={mixins:[r.default],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return e>=1&&e<=7}},value:{},defaultValue:{validator:function(e){return null===e||(0,n.isDate)(e)||Array.isArray(e)&&e.every(n.isDate)}},date:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1,row:null,column:null}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return e>3?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return o.concat(o).slice(e,e+7)},year:function(){return this.date.getFullYear()},month:function(){return this.date.getMonth()},startDate:function(){return(0,n.getStartDateOfMonth)(this.year,this.month)},rows:function(){var e=new Date(this.year,this.month,1),t=(0,n.getFirstDayOfMonth)(e),i=(0,n.getDayCountOfMonth)(e.getFullYear(),e.getMonth()),s=(0,n.getDayCountOfMonth)(e.getFullYear(),0===e.getMonth()?11:e.getMonth()-1);t=0===t?7:t;for(var a=this.offsetDay,r=this.tableRows,o=1,u=void 0,c=this.startDate,d=this.disabledDate,h=l(new Date),f=0;f<6;f++){var p=r[f];this.showWeekNumber&&(p[0]||(p[0]={type:"week",text:(0,n.getWeekNumber)(new Date(c.getTime()+n.DAY_DURATION*(7*f+1)))}));for(var m=0;m<7;m++){var v=p[this.showWeekNumber?m+1:m];v||(v={row:f,column:m,type:"normal",inRange:!1,start:!1,end:!1}),v.type="normal";var g=7*f+m,y=c.getTime()+n.DAY_DURATION*(g-a);v.inRange=y>=l(this.minDate)&&y<=l(this.maxDate),v.start=this.minDate&&y===l(this.minDate),v.end=this.maxDate&&y===l(this.maxDate);y===h&&(v.type="today"),f>=0&&f<=1?m+7*f>=t+a?(v.text=o++,2===o&&(u=7*f+m)):(v.text=s-(t+a-m%7)+1+7*f,v.type="prev-month"):o<=i?(v.text=o++,2===o&&(u=7*f+m)):(v.text=o++-i,v.type="next-month"),v.disabled="function"==typeof d&&d(new Date(y)),this.$set(p,this.showWeekNumber?m+1:m,v)}if("week"===this.selectionMode){var b=this.showWeekNumber?1:0,_=this.showWeekNumber?7:6,C=this.isWeekActive(p[b+1]);p[b].inRange=C,p[b].start=C,p[_].inRange=C,p[_].end=C}}return r.firstDayPosition=u,r}},watch:{"rangeState.endDate":function(e){this.markRange(e)},minDate:function(e,t){e&&!t?(this.rangeState.selecting=!0,this.markRange(e)):e?this.markRange():(this.rangeState.selecting=!1,this.markRange(e))},maxDate:function(e,t){e&&!t&&(this.rangeState.selecting=!1,this.markRange(e),this.$emit("pick",{minDate:this.minDate,maxDate:this.maxDate}))}},data:function(){return{tableRows:[[],[],[],[],[],[]]}},methods:{cellMatchesDate:function(e,t){var i=new Date(t);return this.year===i.getFullYear()&&this.month===i.getMonth()&&Number(e.text)===i.getDate()},getCellClasses:function(e){var t=this,i=this.selectionMode,n=this.defaultValue?Array.isArray(this.defaultValue)?this.defaultValue:[this.defaultValue]:[],s=[];return"normal"!==e.type&&"today"!==e.type||e.disabled?s.push(e.type):(s.push("available"),"today"===e.type&&s.push("today")),"normal"===e.type&&n.some(function(i){return t.cellMatchesDate(e,i)})&&s.push("default"),"day"!==i||"normal"!==e.type&&"today"!==e.type||!this.cellMatchesDate(e,this.value)||s.push("current"),!e.inRange||"normal"!==e.type&&"today"!==e.type&&"week"!==this.selectionMode||(s.push("in-range"),e.start&&s.push("start-date"),e.end&&s.push("end-date")),e.disabled&&s.push("disabled"),s.join(" ")},getDateOfCell:function(e,t){var i=this.startDate;return new Date(i.getTime()+(7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay)*n.DAY_DURATION)},getCellByDate:function(e){var t=this.startDate,i=this.rows,s=(e-t)/n.DAY_DURATION,a=i[Math.floor(s/7)];return this.showWeekNumber?a[s%7+1]:a[s%7]},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),i=t.getFullYear(),s=t.getMonth();return"prev-month"===e.type&&(t.setMonth(0===s?11:s-1),t.setFullYear(0===s?i-1:i)),"next-month"===e.type&&(t.setMonth(11===s?0:s+1),t.setFullYear(11===s?i+1:i)),t.setDate(parseInt(e.text,10)),(0,n.getWeekNumber)(t)===(0,n.getWeekNumber)(this.date)},markRange:function(e){var t=this.startDate;e||(e=this.maxDate);for(var i=this.rows,s=this.minDate,a=0,r=i.length;a=l(s)&&f<=l(e),d.start=s&&f===l(s.getTime()),d.end=e&&f===l(e.getTime())}},handleMouseMove:function(e){if(this.rangeState.selecting){this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:this.rangeState});var t=e.target;if("SPAN"===t.tagName&&(t=t.parentNode.parentNode),"DIV"===t.tagName&&(t=t.parentNode),"TD"===t.tagName){var i=t.cellIndex,n=t.parentNode.rowIndex-1,s=this.rangeState,a=s.row,r=s.column;a===n&&r===i||(this.rangeState.row=n,this.rangeState.column=i,this.rangeState.endDate=this.getDateOfCell(n,i))}}},handleClick:function(e){var t=this,i=e.target;if("SPAN"===i.tagName&&(i=i.parentNode.parentNode),"DIV"===i.tagName&&(i=i.parentNode),"TD"===i.tagName&&!(0,s.hasClass)(i,"disabled")&&!(0,s.hasClass)(i,"week")){var a=this.selectionMode;"week"===a&&(i=i.parentNode.cells[1]);var r=Number(this.year),o=Number(this.month),l=i.cellIndex,u=i.parentNode.rowIndex,c=this.rows[u-1][l],d=c.text,h=i.className,f=new Date(r,o,1);if(-1!==h.indexOf("prev")?(0===o?(r-=1,o=11):o-=1,f.setFullYear(r),f.setMonth(o)):-1!==h.indexOf("next")&&(11===o?(r+=1,o=0):o+=1,f.setFullYear(r),f.setMonth(o)),f.setDate(parseInt(d,10)),"range"===this.selectionMode){if(this.minDate&&this.maxDate){var p=new Date(f.getTime());this.$emit("pick",{minDate:p,maxDate:null},!1),this.rangeState.selecting=!0,this.markRange(this.minDate),this.$nextTick(function(){t.handleMouseMove(e)})}else if(this.minDate&&!this.maxDate)if(f>=this.minDate){var m=new Date(f.getTime());this.rangeState.selecting=!1,this.$emit("pick",{minDate:this.minDate,maxDate:m})}else{var v=new Date(f.getTime());this.$emit("pick",{minDate:v,maxDate:this.maxDate},!1)}else if(!this.minDate){var g=new Date(f.getTime());this.$emit("pick",{minDate:g,maxDate:this.maxDate},!1),this.rangeState.selecting=!0,this.markRange(this.minDate)}}else if("day"===a)this.$emit("pick",f);else if("week"===a){var y=(0,n.getWeekNumber)(f),b=f.getFullYear()+"w"+y;this.$emit("pick",{year:f.getFullYear(),week:y,value:b,date:f})}}}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===e.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:e.handleClick,mousemove:e.handleMouseMove}},[i("tbody",[i("tr",[e.showWeekNumber?i("th",[e._v(e._s(e.t("el.datepicker.week")))]):e._e(),e._l(e.WEEKS,function(t){return i("th",[e._v(e._s(e.t("el.datepicker.weeks."+t)))])})],2),e._l(e.rows,function(t){return i("tr",{staticClass:"el-date-table__row",class:{current:e.isWeekActive(t[1])}},e._l(t,function(t){return i("td",{class:e.getCellClasses(t)},[i("div",[i("span",[e._v("\n "+e._s(t.text)+"\n ")])])])}))})],2)])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-enter":e.handleEnter,"after-leave":e.handleLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker el-popper",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass]},[i("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?i("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t){return i("button",{staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(i){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])})):e._e(),i("div",{staticClass:"el-picker-panel__body"},[e.showTime?i("div",{staticClass:"el-date-picker__time-header"},[i("span",{staticClass:"el-date-picker__editor-wrap"},[i("el-input",{attrs:{placeholder:e.t("el.datepicker.selectDate"),value:e.visibleDate,size:"small"},nativeOn:{change:function(t){e.handleVisibleDateChange(t)}}})],1),i("span",{staticClass:"el-date-picker__editor-wrap"},[i("el-input",{ref:"input",attrs:{placeholder:e.t("el.datepicker.selectTime"),value:e.visibleTime,size:"small"},on:{focus:function(t){e.timePickerVisible=!e.timePickerVisible}},nativeOn:{change:function(t){e.handleVisibleTimeChange(t)}}}),i("time-picker",{ref:"timepicker",attrs:{"time-arrow-control":e.arrowControl,visible:e.timePickerVisible},on:{pick:e.handleTimePick,mounted:e.proxyTimePickerDataProperties}})],1)]):e._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==e.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header",class:{"el-date-picker__header--bordered":"year"===e.currentView||"month"===e.currentView}},[i("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.prevYear}}),i("button",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.prevMonth}}),i("span",{staticClass:"el-date-picker__header-label",on:{click:e.showYearPicker}},[e._v(e._s(e.yearLabel))]),i("span",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{active:"month"===e.currentView},on:{click:e.showMonthPicker}},[e._v(e._s(e.t("el.datepicker.month"+(e.month+1))))]),i("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.nextYear}}),i("button",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.nextMonth}})]),i("div",{staticClass:"el-picker-panel__content"},[i("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],attrs:{"selection-mode":e.selectionMode,"first-day-of-week":e.firstDayOfWeek,value:new Date(e.value),"default-value":e.defaultValue?new Date(e.defaultValue):null,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleDatePick}}),i("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===e.currentView,expression:"currentView === 'year'"}],attrs:{value:new Date(e.value),"default-value":e.defaultValue?new Date(e.defaultValue):null,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleYearPick}}),i("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===e.currentView,expression:"currentView === 'month'"}],attrs:{value:new Date(e.value),"default-value":e.defaultValue?new Date(e.defaultValue):null,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleMonthPick}})],1)])],2),i("div",{directives:[{name:"show",rawName:"v-show",value:e.footerVisible&&"date"===e.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[i("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:e.changeToNow}},[e._v("\n "+e._s(e.t("el.datepicker.now"))+"\n ")]),i("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini"},on:{click:e.confirm}},[e._v("\n "+e._s(e.t("el.datepicker.confirm"))+"\n ")])],1)])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(230),s=i.n(n),a=i(231),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(11),a=i(5),r=n(a),o=i(41),l=n(o),u=i(59),c=n(u),d=i(7),h=n(d),f=function(e,t){return new Date(new Date(e).getTime()+t)},p=function(e){return Array.isArray(e)?[new Date(e[0]),new Date(e[1])]:e?[new Date(e),f(e,864e5)]:[new Date,f(Date.now,864e5)]};t.default={mixins:[r.default],computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting)},leftLabel:function(){return this.leftDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.leftDate.getMonth()+1))},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.rightDate.getMonth()+1))},leftYear:function(){return this.leftDate.getFullYear()},leftMonth:function(){return this.leftDate.getMonth()},leftMonthDate:function(){return this.leftDate.getDate()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},rightMonthDate:function(){return this.rightDate.getDate()},minVisibleDate:function(){return this.minDate?(0,s.formatDate)(this.minDate):""},maxVisibleDate:function(){return this.maxDate||this.minDate?(0,s.formatDate)(this.maxDate||this.minDate):""},minVisibleTime:function(){return this.minDate?(0,s.formatDate)(this.minDate,"HH:mm:ss"):""},maxVisibleTime:function(){return this.maxDate||this.minDate?(0,s.formatDate)(this.maxDate||this.minDate,"HH:mm:ss"):""},dateFormat:function(){return this.format?this.format.replace("HH:mm","").replace(":ss","").trim():"yyyy-MM-dd"},timeFormat:function(){return this.format&&-1===this.format.indexOf("ss")?"HH:mm":"HH:mm:ss"}},data:function(){return{popperClass:"",value:[],defaultValue:null,minDate:"",maxDate:"",leftDate:new Date,rightDate:(0,s.nextMonth)(new Date),rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,format:"",arrowControl:!1}},watch:{minDate:function(e){var t=this;this.$nextTick(function(){if(t.$refs.maxTimePicker&&t.maxDate&&t.maxDatethis.maxDate&&(this.maxDate=this.minDate)):(this.maxDate=(0,s.modifyDate)(this.maxDate,n.getFullYear(),n.getMonth(),n.getDate()),this.maxDatethis.maxDate&&(this.maxDate=this.minDate),this.$refs.minTimePicker.value=this.minDate,this.minTimePickerVisible=!1):(this.maxDate=(0,s.modifyTime)(this.maxDate,n.getHours(),n.getMinutes(),n.getSeconds()),this.maxDate1&&void 0!==arguments[1])||arguments[1];this.maxDate===e.maxDate&&this.minDate===e.minDate||(this.onPick&&this.onPick(e),this.maxDate=e.maxDate,this.minDate=e.minDate,t&&!this.showTime&&this.handleConfirm())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleMinTimePick:function(e,t,i){this.minDate=this.minDate||new Date,e&&(this.minDate=(0,s.modifyTime)(this.minDate,e.getHours(),e.getMinutes(),e.getSeconds())),i||(this.minTimePickerVisible=t),this.maxDate&&this.maxDate.getTime()this.maxDate.getTime()&&(this.minDate=new Date(this.maxDate))},prevMonth:function(){this.leftDate=(0,s.prevMonth)(this.leftDate),this.rightDate=(0,s.nextMonth)(this.leftDate)},nextMonth:function(){this.leftDate=(0,s.nextMonth)(this.leftDate),this.rightDate=(0,s.nextMonth)(this.leftDate)},nextYear:function(){this.leftDate=(0,s.modifyDate)(this.leftDate,this.leftYear+1,this.leftMonth,this.leftMonthDate),this.rightDate=(0,s.nextMonth)(this.leftDate)},prevYear:function(){this.leftDate=(0,s.modifyDate)(this.leftDate,this.leftYear-1,this.leftMonth,this.leftMonthDate),this.rightDate=(0,s.nextMonth)(this.leftDate)},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.$emit("pick",[this.minDate,this.maxDate],e)},isValidValue:function(e){return Array.isArray(e)&&e&&e[0]&&e[1]&&(0,s.isDate)(e[0])&&(0,s.isDate)(e[1])&&e[0].getTime()<=e[1].getTime()&&("function"!=typeof this.disabledDate||!this.disabledDate(e[0])&&!this.disabledDate(e[1]))}},components:{TimePicker:l.default,DateTable:c.default,ElInput:h.default}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker el-popper",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass]},[i("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?i("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t){return i("button",{staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(i){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])})):e._e(),i("div",{staticClass:"el-picker-panel__body"},[e.showTime?i("div",{staticClass:"el-date-range-picker__time-header"},[i("span",{staticClass:"el-date-range-picker__editors-wrap"},[i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.startDate"),value:e.minVisibleDate},nativeOn:{input:function(t){e.handleDateInput(t,"min")},change:function(t){e.handleDateChange(t,"min")}}})],1),i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.startTime"),value:e.minVisibleTime},on:{focus:function(t){e.minTimePickerVisible=!e.minTimePickerVisible}},nativeOn:{change:function(t){e.handleTimeChange(t,"min")}}}),i("time-picker",{ref:"minTimePicker",attrs:{"time-arrow-control":e.arrowControl,visible:e.minTimePickerVisible},on:{pick:e.handleMinTimePick,mounted:function(t){e.$refs.minTimePicker.format=e.timeFormat}}})],1)]),i("span",{staticClass:"el-icon-arrow-right"}),i("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.endDate"),value:e.maxVisibleDate,readonly:!e.minDate},nativeOn:{input:function(t){e.handleDateInput(t,"max")},change:function(t){e.handleDateChange(t,"max")}}})],1),i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{ref:"maxInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.endTime"),value:e.maxVisibleTime,readonly:!e.minDate},on:{focus:function(t){e.minDate&&(e.maxTimePickerVisible=!e.maxTimePickerVisible)}},nativeOn:{change:function(t){e.handleTimeChange(t,"max")}}}),i("time-picker",{ref:"maxTimePicker",attrs:{"time-arrow-control":e.arrowControl,visible:e.maxTimePickerVisible},on:{pick:e.handleMaxTimePick,mounted:function(t){e.$refs.maxTimePicker.format=e.timeFormat}}})],1)])]):e._e(),i("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[i("div",{staticClass:"el-date-range-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.prevYear}}),i("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.prevMonth}}),i("div",[e._v(e._s(e.leftLabel))])]),i("date-table",{attrs:{"selection-mode":"range",date:e.leftDate,"default-value":e.defaultValue,"min-date":e.minDate,"max-date":e.maxDate,"range-state":e.rangeState,"disabled-date":e.disabledDate,"first-day-of-week":e.firstDayOfWeek},on:{changerange:e.handleChangeRange,pick:e.handleRangePick}})],1),i("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[i("div",{staticClass:"el-date-range-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.nextYear}}),i("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.nextMonth}}),i("div",[e._v(e._s(e.rightLabel))])]),i("date-table",{attrs:{"selection-mode":"range",date:e.rightDate,"default-value":e.defaultValue,"min-date":e.minDate,"max-date":e.maxDate,"range-state":e.rangeState,"disabled-date":e.disabledDate,"first-day-of-week":e.firstDayOfWeek},on:{changerange:e.handleChangeRange,pick:e.handleRangePick}})],1)])],2),e.showTime?i("div",{staticClass:"el-picker-panel__footer"},[i("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{size:"mini",type:"text"},on:{click:e.handleClear}},[e._v("\n "+e._s(e.t("el.datepicker.clear"))+"\n ")]),i("el-button",{staticClass:"el-picker-panel__link-btn",attrs:{plain:"",size:"mini",disabled:e.btnDisabled},on:{click:function(t){e.handleConfirm()}}},[e._v("\n "+e._s(e.t("el.datepicker.confirm"))+"\n ")])],1):e._e()])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(233),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(40),a=n(s),r=i(234),o=n(r);t.default={mixins:[a.default],name:"ElTimeSelect",beforeCreate:function(){this.type="time-select",this.panel=o.default}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(235),s=i.n(n),a=i(236),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(23),a=n(s),r=i(35),o=n(r),l=function(e){var t=(e||"").split(":");if(t.length>=2){return{hours:parseInt(t[0],10),minutes:parseInt(t[1],10)}}return null},u=function(e,t){var i=l(e),n=l(t),s=i.minutes+60*i.hours,a=n.minutes+60*n.hours;return s===a?0:s>a?1:-1},c=function(e){return(e.hours<10?"0"+e.hours:e.hours)+":"+(e.minutes<10?"0"+e.minutes:e.minutes)},d=function(e,t){var i=l(e),n=l(t),s={hours:i.hours,minutes:i.minutes};return s.minutes+=n.minutes,s.hours+=n.hours,s.hours+=Math.floor(s.minutes/60),s.minutes=s.minutes%60,c(s)};t.default={components:{ElScrollbar:a.default},watch:{value:function(e){var t=this;e&&this.$nextTick(function(){return t.scrollToOption()})}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick")},scrollToOption:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".selected",t=this.$refs.popper.querySelector(".el-picker-panel__content");(0,o.default)(t,t.querySelector(e))},handleMenuEnter:function(){var e=this,t=-1!==this.items.map(function(e){return e.value}).indexOf(this.value),i=-1!==this.items.map(function(e){return e.value}).indexOf(this.defaultValue),n=t&&".selected"||i&&".default"||".time-select-item:not(.disabled)";this.$nextTick(function(){return e.scrollToOption(n)})},scrollDown:function(e){for(var t=this.items,i=t.length,n=t.length,s=t.map(function(e){return e.value}).indexOf(this.value);n--;)if(s=(s+e+i)%i,!t[s].disabled)return void this.$emit("pick",t[s].value,!0)},isValidValue:function(e){return-1!==this.items.filter(function(e){return!e.disabled}).map(function(e){return e.value}).indexOf(e)},handleKeydown:function(e){var t=e.keyCode;if(38===t||40===t){var i={40:1,38:-1},n=i[t.toString()];return this.scrollDown(n),void e.stopPropagation()}}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",defaultValue:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e=this.start,t=this.end,i=this.step,n=[];if(e&&t&&i)for(var s=e;u(s,t)<=0;)n.push({value:s,disabled:u(s,this.minTime||"-1:-1")<=0||u(s,this.maxTime||"100:100")>=0}),s=d(s,i);return n}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":e.handleMenuEnter,"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],ref:"popper",staticClass:"el-picker-panel time-select el-popper",class:e.popperClass,style:{width:e.width+"px"}},[i("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},e._l(e.items,function(t){return i("div",{staticClass:"time-select-item",class:{selected:e.value===t.value,disabled:t.disabled,default:t.value===e.defaultValue},attrs:{disabled:t.disabled},on:{click:function(i){e.handleClick(t)}}},[e._v(e._s(t.value))])}))],1)])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(238),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(40),a=n(s),r=i(41),o=n(r),l=i(239),u=n(l);t.default={mixins:[a.default],name:"ElTimePicker",props:{isRange:Boolean,arrowControl:Boolean},data:function(){return{type:""}},watch:{isRange:function(e){this.picker?(this.unmountPicker(),this.type=e?"timerange":"time",this.panel=e?u.default:o.default,this.mountPicker()):(this.type=e?"timerange":"time",this.panel=e?u.default:o.default)}},created:function(){this.type=this.isRange?"timerange":"time",this.panel=this.isRange?u.default:o.default}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(240),s=i.n(n),a=i(241),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(11),a=i(5),r=n(a),o=i(58),l=n(o),u=(0,s.parseDate)("00:00:00","HH:mm:ss"),c=(0,s.parseDate)("23:59:59","HH:mm:ss"),d=function(e){return(0,s.modifyDate)(u,e.getFullYear(),e.getMonth(),e.getDate())},h=function(e){return(0,s.modifyDate)(c,e.getFullYear(),e.getMonth(),e.getDate())},f=function(e,t){return new Date(Math.min(e.getTime()+t,h(e).getTime()))};t.default={mixins:[r.default],components:{TimeSpinner:l.default},computed:{showSeconds:function(){return-1!==(this.format||"").indexOf("ss")},offset:function(){return this.showSeconds?11:8},spinner:function(){return this.selectionRange[0]this.maxDate.getTime()}},data:function(){return{popperClass:"",minDate:new Date,maxDate:new Date,value:[],oldValue:[new Date,new Date],defaultValue:null,format:"HH:mm:ss",visible:!1,selectionRange:[0,2],arrowControl:!1}},watch:{value:function(e){var t=this;Array.isArray(e)?(this.minDate=new Date(e[0]),this.maxDate=new Date(e[1])):Array.isArray(this.defaultValue)?(this.minDate=new Date(this.defaultValue[0]),this.maxDate=new Date(this.defaultValue[1])):this.defaultValue?(this.minDate=new Date(this.defaultValue),this.maxDate=f(new Date(this.defaultValue),36e5)):(this.minDate=new Date,this.maxDate=f(new Date,36e5)),this.visible&&this.$nextTick(function(e){return t.adjustSpinners()})},visible:function(e){var t=this;e&&(this.oldValue=this.value,this.$nextTick(function(){return t.$refs.minSpinner.emitSelectRange("hours")}))}},methods:{handleClear:function(){this.$emit("pick",[])},handleCancel:function(){this.$emit("pick",this.oldValue)},handleMinChange:function(e){this.minDate=(0,s.clearMilliseconds)(e),this.handleChange()},handleMaxChange:function(e){this.maxDate=(0,s.clearMilliseconds)(e),this.handleChange()},handleChange:function(){this.isValidValue([this.minDate,this.maxDate])&&(this.$refs.minSpinner.selectableRange=[[d(this.minDate),this.maxDate]],this.$refs.maxSpinner.selectableRange=[[this.minDate,h(this.maxDate)]],this.$emit("pick",[this.minDate,this.maxDate],!0))},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t,"min"),this.selectionRange=[e,t]},setMaxSelectionRange:function(e,t){this.$emit("select-range",e,t,"max"),this.selectionRange=[e+this.offset,t+this.offset]},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.$refs.minSpinner.selectableRange,i=this.$refs.maxSpinner.selectableRange;this.minDate=(0,s.limitTimeRange)(this.minDate,t,this.format),this.maxDate=(0,s.limitTimeRange)(this.maxDate,i,this.format),this.$emit("pick",[this.minDate,this.maxDate],e)},adjustSpinners:function(){this.$refs.minSpinner.adjustSpinners(),this.$refs.maxSpinner.adjustSpinners()},changeSelectionRange:function(e){var t=this.showSeconds?[0,3,6,11,14,17]:[0,3,8,11],i=["hours","minutes"].concat(this.showSeconds?["seconds"]:[]),n=t.indexOf(this.selectionRange[0]),s=(n+e+t.length)%t.length,a=t.length/2;s-1}},openDelay:{type:Number,default:0},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},transition:{type:String,default:"fade-in-linear"}},watch:{showPopper:function(e,t){e?this.$emit("show"):this.$emit("hide")},"$refs.reference":{deep:!0,handler:function(e){console.log(e)}}},mounted:function(){var e=this.reference||this.$refs.reference,t=this.popper||this.$refs.popper;if(!e&&this.$slots.reference&&this.$slots.reference[0]&&(e=this.referenceElm=this.$slots.reference[0].elm),"click"===this.trigger)(0,a.on)(e,"click",this.doToggle),(0,a.on)(document,"click",this.handleDocumentClick);else if("hover"===this.trigger)(0,a.on)(e,"mouseenter",this.handleMouseEnter),(0,a.on)(t,"mouseenter",this.handleMouseEnter),(0,a.on)(e,"mouseleave",this.handleMouseLeave),(0,a.on)(t,"mouseleave",this.handleMouseLeave);else if("focus"===this.trigger){var i=!1;if([].slice.call(e.children).length)for(var n=e.childNodes,s=n.length,r=0;r0&&function(){p=v.shift();var t=p.options;for(var i in t)t.hasOwnProperty(i)&&(m[i]=t[i]);void 0===t.callback&&(m.callback=g);var n=m.callback;m.callback=function(t,i){n(t,i),e()},(0,d.isVNode)(m.message)?(m.$slots.default=[m.message],m.message=null):delete m.$slots.default,["modal","showClose","closeOnClickModal","closeOnPressEscape","closeOnHashChange"].forEach(function(e){void 0===m[e]&&(m[e]=!0)}),document.body.appendChild(m.$el),r.default.nextTick(function(){m.visible=!0})}()},_=function e(t,i){if(!r.default.prototype.$isServer){if("string"==typeof t||(0,d.isVNode)(t)?(t={message:t},"string"==typeof arguments[1]&&(t.title=arguments[1])):t.callback&&!i&&(i=t.callback),"undefined"!=typeof Promise)return new Promise(function(n,s){v.push({options:(0,c.default)({},h,e.defaults,t),callback:i,resolve:n,reject:s}),b()});v.push({options:(0,c.default)({},h,e.defaults,t),callback:i}),b()}};_.setDefaults=function(e){_.defaults=e},_.alert=function(e,t,i){return"object"===(void 0===t?"undefined":s(t))?(i=t,t=""):void 0===t&&(t=""),_((0,c.default)({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},i))},_.confirm=function(e,t,i){return"object"===(void 0===t?"undefined":s(t))?(i=t,t=""):void 0===t&&(t=""),_((0,c.default)({title:t,message:e,$type:"confirm",showCancelButton:!0},i))},_.prompt=function(e,t,i){return"object"===(void 0===t?"undefined":s(t))?(i=t,t=""):void 0===t&&(t=""),_((0,c.default)({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},i))},_.close=function(){m.visible=!1,v=[],p=null},t.default=_,t.MessageBox=_},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(250),s=i.n(n),a=i(252),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(18),a=n(s),r=i(5),o=n(r),l=i(7),u=n(l),c=i(28),d=n(c),h=i(4),f=i(12),p=i(251),m=n(p),v=void 0,g={success:"circle-check",info:"information",warning:"warning",error:"circle-cross"};t.default={mixins:[a.default,o.default],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0},closeOnHashChange:{default:!0},center:{default:!1,type:Boolean},roundButton:{default:!1,type:Boolean}},components:{ElInput:u.default,ElButton:d.default},computed:{typeClass:function(){return this.type&&g[this.type]?"el-icon-"+g[this.type]:""},confirmButtonClasses:function(){return"el-button--primary "+this.confirmButtonClass},cancelButtonClasses:function(){return""+this.cancelButtonClass}},methods:{getSafeClose:function(){var e=this,t=this.uid;return function(){e.$nextTick(function(){t===e.uid&&e.doClose()})}},doClose:function(){var e=this;this.visible&&(this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),v.closeDialog(),this.lockScroll&&setTimeout(function(){e.modal&&"hidden"!==e.bodyOverflow&&(document.body.style.overflow=e.bodyOverflow,document.body.style.paddingRight=e.bodyPaddingRight),e.bodyOverflow=null,e.bodyPaddingRight=null},200),this.opened=!1,this.transition||this.doAfterClose(),setTimeout(function(){e.action&&e.callback(e.action,e)}))},handleWrapperClick:function(){this.closeOnClickModal&&this.handleAction("cancel")},handleAction:function(e){("prompt"!==this.$type||"confirm"!==e||this.validate())&&(this.action=e,"function"==typeof this.beforeClose?(this.close=this.getSafeClose(),this.beforeClose(e,this,this.close)):this.doClose())},validate:function(){if("prompt"===this.$type){var e=this.inputPattern;if(e&&!e.test(this.inputValue||""))return this.editorErrorMessage=this.inputErrorMessage||(0,f.t)("el.messagebox.error"),(0,h.addClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var i=t(this.inputValue);if(!1===i)return this.editorErrorMessage=this.inputErrorMessage||(0,f.t)("el.messagebox.error"),(0,h.addClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!1;if("string"==typeof i)return this.editorErrorMessage=i,!1}}return this.editorErrorMessage="",(0,h.removeClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!0},getFistFocus:function(){var e=this.$el.querySelector(".el-message-box__btns .el-button"),t=this.$el.querySelector(".el-message-box__btns .el-message-box__title");return e&&e[0]||t}},watch:{inputValue:{immediate:!0,handler:function(e){var t=this;this.$nextTick(function(i){"prompt"===t.$type&&null!==e&&t.validate()})}},visible:function(e){var t=this;e&&(this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),this.focusAfterClosed=document.activeElement,v=new m.default(this.$el,this.focusAfterClosed,this.getFistFocus())),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.$refs.input.$el.querySelector("input").focus()},500):(this.editorErrorMessage="",(0,h.removeClass)(this.$refs.input.$el.querySelector("input"),"invalid")))}},mounted:function(){this.closeOnHashChange&&window.addEventListener("hashchange",this.close)},beforeDestroy:function(){this.closeOnHashChange&&window.removeEventListener("hashchange",this.close),setTimeout(function(){v.closeDialog()})},data:function(){return{uid:1,title:void 0,message:"",type:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null,dangerouslyUseHTMLString:!1,focusAfterClosed:null}}}},function(e,t,i){"use strict";t.__esModule=!0;var n,s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i(36),r=function(e){return e&&e.__esModule?e:{default:e}}(a),o=o||{};o.Dialog=function(e,t,i){var a=this;if(this.dialogNode=e,null===this.dialogNode||"dialog"!==this.dialogNode.getAttribute("role"))throw new Error("Dialog() requires a DOM element with ARIA role of dialog.");"string"==typeof t?this.focusAfterClosed=document.getElementById(t):"object"===(void 0===t?"undefined":s(t))?this.focusAfterClosed=t:this.focusAfterClosed=null,"string"==typeof i?this.focusFirst=document.getElementById(i):"object"===(void 0===i?"undefined":s(i))?this.focusFirst=i:this.focusFirst=null,this.focusFirst?this.focusFirst.focus():r.default.focusFirstDescendant(this.dialogNode),this.lastFocus=document.activeElement,n=function(e){a.trapFocus(e)},this.addListeners()},o.Dialog.prototype.addListeners=function(){document.addEventListener("focus",n,!0)},o.Dialog.prototype.removeListeners=function(){document.removeEventListener("focus",n,!0)},o.Dialog.prototype.closeDialog=function(){var e=this;this.removeListeners(),this.focusAfterClosed&&setTimeout(function(){e.focusAfterClosed.focus()})},o.Dialog.prototype.trapFocus=function(e){r.default.IgnoreUtilFocusChanges||(this.dialogNode.contains(e.target)?this.lastFocus=e.target:(r.default.focusFirstDescendant(this.dialogNode),this.lastFocus===document.activeElement&&r.default.focusLastDescendant(this.dialogNode),this.lastFocus=document.activeElement))},t.default=o.Dialog},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"msgbox-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-message-box__wrapper",attrs:{tabindex:"-1",role:"dialog","aria-modal":"true","aria-label":e.title||"dialog"},on:{click:function(t){if(t.target!==t.currentTarget)return null;e.handleWrapperClick(t)}}},[i("div",{staticClass:"el-message-box",class:[e.customClass,e.center&&"el-message-box--center"]},[void 0!==e.title?i("div",{staticClass:"el-message-box__header"},[i("div",{staticClass:"el-message-box__title"},[e.typeClass&&e.center?i("div",{staticClass:"el-message-box__status",class:[e.typeClass]}):e._e(),i("span",[e._v(e._s(e.title))])]),e.showClose?i("button",{staticClass:"el-message-box__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:function(t){e.handleAction("cancel")},keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key))return null;e.handleAction("cancel")}}},[i("i",{staticClass:"el-message-box__close el-icon-close"})]):e._e()]):e._e(),""!==e.message?i("div",{staticClass:"el-message-box__content"},[e.typeClass&&!e.center?i("div",{staticClass:"el-message-box__status",class:[e.typeClass]}):e._e(),i("div",{staticClass:"el-message-box__message"},[e._t("default",[e.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:e._s(e.message)}}):i("p",[e._v(e._s(e.message))])])],2),i("div",{directives:[{name:"show",rawName:"v-show",value:e.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[i("el-input",{ref:"input",attrs:{placeholder:e.inputPlaceholder},nativeOn:{keyup:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key))return null;e.handleAction("confirm")}},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}}),i("div",{staticClass:"el-message-box__errormsg",style:{visibility:e.editorErrorMessage?"visible":"hidden"}},[e._v(e._s(e.editorErrorMessage))])],1)]):e._e(),i("div",{staticClass:"el-message-box__btns"},[i("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showCancelButton,expression:"showCancelButton"}],class:[e.cancelButtonClasses],attrs:{loading:e.cancelButtonLoading,round:e.roundButton,size:"small"},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key))return null;e.handleAction("cancel")}},nativeOn:{click:function(t){e.handleAction("cancel")}}},[e._v("\n "+e._s(e.cancelButtonText||e.t("el.messagebox.cancel"))+"\n ")]),i("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[e.confirmButtonClasses],attrs:{loading:e.confirmButtonLoading,round:e.roundButton,size:"small"},on:{keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key))return null;e.handleAction("confirm")}},nativeOn:{click:function(t){e.handleAction("confirm")}}},[e._v("\n "+e._s(e.confirmButtonText||e.t("el.messagebox.confirm"))+"\n ")])],1)])])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(254),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(255),s=i.n(n),a=i(256),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"},separatorClass:{type:String,default:""}},mounted:function(){var e=this.$el.querySelectorAll(".el-breadcrumb__item");e[e.length-1].setAttribute("aria-current","page")}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-breadcrumb",attrs:{"aria-label":"Breadcrumb",role:"navigation"}},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(258),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(259),s=i.n(n),a=i(260),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:"",separatorClass:""}},mounted:function(){var e=this;this.separator=this.$parent.separator,this.separatorClass=this.$parent.separatorClass;var t=this;if(this.to){var i=this.$refs.link;i.setAttribute("role","link"),i.addEventListener("click",function(i){var n=e.to;t.replace?t.$router.replace(n):t.$router.push(n)})}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{staticClass:"el-breadcrumb__item"},[i("span",{ref:"link",staticClass:"el-breadcrumb__inner",attrs:{role:"link"}},[e._t("default")],2),e.separatorClass?i("i",{staticClass:"el-breadcrumb__separator",class:e.separatorClass}):i("span",{staticClass:"el-breadcrumb__separator",attrs:{role:"presentation"}},[e._v(e._s(e.separator))])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(262),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(263),s=i.n(n),a=i(264),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElForm",componentName:"ElForm",provide:function(){return{elForm:this}},props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,inlineMessage:Boolean,statusIcon:Boolean,showMessage:{type:Boolean,default:!0},size:String},watch:{rules:function(){this.validate()}},data:function(){return{fields:[]}},created:function(){var e=this;this.$on("el.form.addField",function(t){t&&e.fields.push(t)}),this.$on("el.form.removeField",function(t){t.prop&&e.fields.splice(e.fields.indexOf(t),1)})},methods:{resetFields:function(){this.model&&this.fields.forEach(function(e){e.resetField()})},validate:function(e){if(!this.model)return void console.warn("[Element Warn][Form]model is required for validate to work!");var t=!0;if(0===this.fields.length&&e&&e(!0),this.fields.forEach(function(e,i){e.validate("",function(e){e&&(t=!1)})}),"function"==typeof e)e(t);else if(window.Promise)return Promise[t?"resolve":"reject"](t)},validateField:function(e,t){var i=this.fields.filter(function(t){return t.prop===e})[0];if(!i)throw new Error("must call validateField with valid prop string!");i.validate("",t)}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("form",{staticClass:"el-form",class:[e.labelPosition?"el-form--label-"+e.labelPosition:"",{"el-form--inline":e.inline}]},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(266),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(267),s=i.n(n),a=i(289),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}function a(e,t){var i=e;t=t.replace(/\[(\w+)\]/g,".$1"),t=t.replace(/^\./,"");for(var n=t.split("."),s=0,a=n.length;s1&&void 0!==arguments[1]?arguments[1]:s,n=this.getFilteredRule(e);if(!(n&&0!==n.length||this._props.hasOwnProperty("required")))return i(),!0;this.validateState="validating";var a={};a[this.prop]=n;var r=new o.default(a),l={};l[this.prop]=this.fieldValue,r.validate(l,{firstFields:!0},function(e,n){t.validateState=e?"error":"success",t.validateMessage=e?e[0].message:"",i(t.validateMessage)})},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,i=this.prop;-1!==i.indexOf(":")&&(i=i.replace(/:/,"."));var n=a(e,i);Array.isArray(t)?(this.validateDisabled=!0,n.o[n.k]=[].concat(this.initialValue)):(this.validateDisabled=!0,n.o[n.k]=this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules,i=this._props.hasOwnProperty("required")?{required:!!this.required}:[];return e=e?e[this.prop]:[],[].concat(t||e||[]).concat(i)},getFilteredRule:function(e){return this.getRules().filter(function(t){return!t.trigger||-1!==t.trigger.indexOf(e)})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){if(this.validateDisabled)return void(this.validateDisabled=!1);this.validate("change")}},mounted:function(){if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var e=this.fieldValue;Array.isArray(e)&&(e=[].concat(e)),Object.defineProperty(this,"initialValue",{value:e});(this.getRules().length||this._props.hasOwnProperty("required"))&&(this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}}},function(e,t,i){"use strict";function n(e){this.rules=null,this._messages=u.messages,this.define(e)}Object.defineProperty(t,"__esModule",{value:!0});var s=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:{},l=arguments[2],d=e,h=o,f=l;if("function"==typeof h&&(f=h,h={}),!this.rules||0===Object.keys(this.rules).length)return void(f&&f());if(h.messages){var p=this.messages();p===u.messages&&(p=(0,u.newMessages)()),(0,r.deepMerge)(p,h.messages),h.messages=p}else h.messages=this.messages();h.error=c.error;var m=void 0,v=void 0,g={};(h.keys||Object.keys(this.rules)).forEach(function(t){m=i.rules[t],v=d[t],m.forEach(function(n){var a=n;"function"==typeof a.transform&&(d===e&&(d=s({},d)),v=d[t]=a.transform(v)),a="function"==typeof a?{validator:a}:s({},a),a.validator=i.getValidationMethod(a),a.field=t,a.fullField=a.fullField||t,a.type=i.getType(a),a.validator&&(g[t]=g[t]||[],g[t].push({rule:a,value:v,source:d,field:t}))})});var y={};(0,r.asyncMap)(g,h,function(e,t){function i(e,t){return s({},t,{fullField:l.fullField+"."+e})}function o(){var a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],o=a;if(Array.isArray(o)||(o=[o]),o.length&&(0,r.warning)("async-validator:",o),o.length&&l.message&&(o=[].concat(l.message)),o=o.map((0,r.complementError)(l)),(h.first||h.fieldFirst)&&o.length)return y[l.field]=1,t(o);if(u){if(l.required&&!e.value)return o=l.message?[].concat(l.message).map((0,r.complementError)(l)):[h.error(l,(0,r.format)(h.messages.required,l.field))],t(o);var c={};if(l.defaultField)for(var d in e.value)e.value.hasOwnProperty(d)&&(c[d]=l.defaultField);c=s({},c,e.rule.fields);for(var f in c)if(c.hasOwnProperty(f)){var p=Array.isArray(c[f])?c[f]:[c[f]];c[f]=p.map(i.bind(null,f))}var m=new n(c);m.messages(h.messages),e.rule.options&&(e.rule.options.messages=h.messages,e.rule.options.error=h.error),m.validate(e.value,e.rule.options||h,function(e){t(e&&e.length?o.concat(e):e)})}else t(o)}var l=e.rule,u=!("object"!==l.type&&"array"!==l.type||"object"!==a(l.fields)&&"object"!==a(l.defaultField));u=u&&(l.required||!l.required&&e.value),l.field=e.field,l.validator(l,e.value,o,e.source,h)},function(e){t(e)})},getType:function(e){if(void 0===e.type&&e.pattern instanceof RegExp&&(e.type="pattern"),"function"!=typeof e.validator&&e.type&&!l.default.hasOwnProperty(e.type))throw new Error((0,r.format)("Unknown rule type %s",e.type));return e.type||"string"},getValidationMethod:function(e){if("function"==typeof e.validator)return e.validator;var t=Object.keys(e),i=t.indexOf("message");return-1!==i&&t.splice(i,1),1===t.length&&"required"===t[0]?l.default.required:l.default[this.getType(e)]||!1}},n.register=function(e,t){if("function"!=typeof t)throw new Error("Cannot register a validator by type, validator is not a function");l.default[e]=t},n.messages=u.messages,t.default=n,e.exports=t.default},function(e,t,i){"use strict";e.exports={string:i(270),method:i(276),number:i(277),boolean:i(278),regexp:i(279),integer:i(280),float:i(281),array:i(282),object:i(283),enum:i(284),pattern:i(285),email:i(42),url:i(42),date:i(286),hex:i(42),required:i(287)}},function(e,t,i){"use strict";function n(e,t,i,n,s){var o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,r.isEmptyValue)(t,"string")&&!e.required)return i();a.default.required(e,t,n,o,s,"string"),(0,r.isEmptyValue)(t,"string")||(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s),a.default.pattern(e,t,n,o,s),!0===e.whitespace&&a.default.whitespace(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(3);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){(/^\s+$/.test(t)||""===t)&&n.push(a.format(s.messages.whitespace,e.fullField))}Object.defineProperty(t,"__esModule",{value:!0});var s=i(3),a=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}(s);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,a){if(e.required&&void 0===t)return void(0,l.default)(e,t,i,n,a);var o=["integer","float","array","regexp","object","method","email","number","date","url","hex"],u=e.type;o.indexOf(u)>-1?c[u](t)||n.push(r.format(a.messages.types[u],e.fullField,e.type)):u&&(void 0===t?"undefined":s(t))!==e.type&&n.push(r.format(a.messages.types[u],e.fullField,e.type))}Object.defineProperty(t,"__esModule",{value:!0});var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i(3),r=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}(a),o=i(60),l=function(e){return e&&e.__esModule?e:{default:e}}(o),u={email:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},c={integer:function(e){return c.number(e)&&parseInt(e,10)===e},float:function(e){return c.number(e)&&!c.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch(e){return!1}},date:function(e){return"function"==typeof e.getTime&&"function"==typeof e.getMonth&&"function"==typeof e.getYear},number:function(e){return!isNaN(e)&&"number"==typeof e},object:function(e){return"object"===(void 0===e?"undefined":s(e))&&!c.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(u.email)},url:function(e){return"string"==typeof e&&!!e.match(u.url)},hex:function(e){return"string"==typeof e&&!!e.match(u.hex)}};t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){var r="number"==typeof e.len,o="number"==typeof e.min,l="number"==typeof e.max,u=t,c=null,d="number"==typeof t,h="string"==typeof t,f=Array.isArray(t);if(d?c="number":h?c="string":f&&(c="array"),!c)return!1;(h||f)&&(u=t.length),r?u!==e.len&&n.push(a.format(s.messages[c].len,e.fullField,e.len)):o&&!l&&ue.max?n.push(a.format(s.messages[c].max,e.fullField,e.max)):o&&l&&(ue.max)&&n.push(a.format(s.messages[c].range,e.fullField,e.min,e.max))}Object.defineProperty(t,"__esModule",{value:!0});var s=i(3),a=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}(s);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){e[r]=Array.isArray(e[r])?e[r]:[],-1===e[r].indexOf(t)&&n.push(a.format(s.messages[r],e.fullField,e[r].join(", ")))}Object.defineProperty(t,"__esModule",{value:!0});var s=i(3),a=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}(s),r="enum";t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){e.pattern instanceof RegExp&&(e.pattern.test(t)||n.push(a.format(s.messages.pattern.mismatch,e.fullField,t,e.pattern)))}Object.defineProperty(t,"__esModule",{value:!0});var s=i(3),a=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}(s);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){var o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(3);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){var o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(3);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,a){var o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,s.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,o,a),void 0!==t&&r.default.type(e,t,n,o,a)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(3),a=i(6),r=function(e){return e&&e.__esModule?e:{default:e}}(a);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){var o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t)||a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(3);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){var o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(3);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){var o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(3);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){var o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,r.isEmptyValue)(t,"array")&&!e.required)return i();a.default.required(e,t,n,o,s,"array"),(0,r.isEmptyValue)(t,"array")||(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(3);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){var o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(3);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){var l=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,l,s),t&&a.default[o](e,t,n,l,s)}i(l)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(3),o="enum";t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){var o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,r.isEmptyValue)(t,"string")&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t,"string")||a.default.pattern(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(3);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,s){var o=[];if(e.required||!e.required&&n.hasOwnProperty(e.field)){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t)||(a.default.type(e,t,n,o,s),t&&a.default.range(e,t.getTime(),n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s=i(6),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(3);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(e,t,i,n,a){var o=[],l=Array.isArray(t)?"array":void 0===t?"undefined":s(t);r.default.required(e,t,n,o,a,l),i(o)}Object.defineProperty(t,"__esModule",{value:!0});var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i(6),r=function(e){return e&&e.__esModule?e:{default:e}}(a);t.default=n,e.exports=t.default},function(e,t,i){"use strict";function n(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}Object.defineProperty(t,"__esModule",{value:!0}),t.newMessages=n;t.messages=n()},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-form-item",class:[{"el-form-item--feedback":e.elForm&&e.elForm.statusIcon,"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-success":"success"===e.validateState,"is-required":e.isRequired||e.required},e.sizeClass?"el-form-item--"+e.sizeClass:""]},[e.label||e.$slots.label?i("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.prop}},[e._t("label",[e._v(e._s(e.label+e.form.labelSuffix))])],2):e._e(),i("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?i("div",{staticClass:"el-form-item__error",class:{"el-form-item__error--inline":"boolean"==typeof e.inlineMessage?e.inlineMessage:e.elForm&&e.elForm.inlineMessage||!1}},[e._v("\n "+e._s(e.validateMessage)+"\n ")]):e._e()])],2)])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(291),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(292),s=i.n(n),a=i(0),r=a(s.a,null,!1,null,null,null);t.default=r.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(293),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"ElTabs",components:{TabNav:s.default},props:{type:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean,tabPosition:{type:String,default:"top"}},provide:function(){return{rootTabs:this}},data:function(){return{currentName:this.value||this.activeName,panes:[]}},watch:{activeName:function(e){this.setCurrentName(e)},value:function(e){this.setCurrentName(e)},currentName:function(e){var t=this;this.$refs.nav&&this.$nextTick(function(e){t.$refs.nav.scrollToActiveTab()})}},methods:{handleTabClick:function(e,t,i){e.disabled||(this.setCurrentName(t),this.$emit("tab-click",e,i))},handleTabRemove:function(e,t){e.disabled||(t.stopPropagation(),this.$emit("edit",e.name,"remove"),this.$emit("tab-remove",e.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(e){this.currentName=e,this.$emit("input",e)},addPanes:function(e){var t=this.$slots.default.filter(function(e){return 1===e.elm.nodeType&&/\bel-tab-pane\b/.test(e.elm.className)}).indexOf(e.$vnode);this.panes.splice(t,0,e)},removePanes:function(e){var t=this.panes,i=t.indexOf(e);i>-1&&t.splice(i,1)}},render:function(e){var t,i=this.type,n=this.handleTabClick,s=this.handleTabRemove,a=this.handleTabAdd,r=this.currentName,o=this.panes,l=this.editable,u=this.addable,c=this.tabPosition,d=l||u?e("span",{class:"el-tabs__new-tab",on:{click:a,keydown:function(e){13===e.keyCode&&a()}},attrs:{tabindex:"0"}},[e("i",{class:"el-icon-plus"},[])]):null,h={props:{currentName:r,onTabClick:n,onTabRemove:s,editable:l,type:i,panes:o},ref:"nav"},f=e("div",{class:"el-tabs__header"},[d,e("tab-nav",h,[])]),p=e("div",{class:"el-tabs__content"},[this.$slots.default]);return e("div",{class:(t={"el-tabs":!0,"el-tabs--card":"card"===i},t["el-tabs--"+c]=!0,t["el-tabs--border-card"]="border-card"===i,t)},["bottom"!==c?[f,p]:[p,f]])},created:function(){this.currentName||this.setCurrentName("0")}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(294),s=i.n(n),a=i(0),r=a(s.a,null,!1,null,null,null);t.default=r.exports},function(e,t,i){"use strict";function n(){}t.__esModule=!0;var s=i(295),a=function(e){return e&&e.__esModule?e:{default:e}}(s),r=i(24),o=function(e){return e.toLowerCase().replace(/( |^)[a-z]/g,function(e){return e.toUpperCase()})};t.default={name:"TabNav",components:{TabBar:a.default},inject:["rootTabs"],props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:n},onTabRemove:{type:Function,default:n},type:String},data:function(){return{scrollable:!1,navOffset:0,isFocus:!1}},computed:{navStyle:function(){return{transform:"translate"+(-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"X":"Y")+"(-"+this.navOffset+"px)"}},sizeName:function(){return-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height"}},methods:{scrollPrev:function(){var e=this.$refs.navScroll["offset"+o(this.sizeName)],t=this.navOffset;if(t){var i=t>e?t-e:0;this.navOffset=i}},scrollNext:function(){var e=this.$refs.nav["offset"+o(this.sizeName)],t=this.$refs.navScroll["offset"+o(this.sizeName)],i=this.navOffset;if(!(e-i<=t)){var n=e-i>2*t?i+t:e-t;this.navOffset=n}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active"),i=this.$refs.navScroll,n=t.getBoundingClientRect(),s=i.getBoundingClientRect(),a=e.getBoundingClientRect(),r=this.navOffset,o=r;n.lefts.right&&(o=r+n.right-s.right),a.right0&&(this.navOffset=0)}},changeTab:function(e){var t=e.keyCode,i=void 0,n=void 0,s=void 0;-1!==[37,38,39,40].indexOf(t)&&(s=e.currentTarget.querySelectorAll("[role=tab]"),n=Array.prototype.indexOf.call(s,e.target),i=37===t||38===t?0===n?s.length-1:n-1:n0&&void 0!==arguments[0]&&arguments[0],t=[];return function i(n){(n.root?n.root.childNodes:n.childNodes).forEach(function(n){(!e&&n.checked||e&&n.isLeaf&&n.checked)&&t.push(n.data),i(n)})}(this),t},e.prototype.getCheckedKeys=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.key,i=this._getAllNodes(),n=[];return i.forEach(function(i){(!e||e&&i.isLeaf)&&i.checked&&n.push((i.data||{})[t])}),n},e.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var i in t)t.hasOwnProperty(i)&&e.push(t[i]);return e},e.prototype.updateChildren=function(e,t){var i=this.nodesMap[e];if(i){for(var n=i.childNodes,s=0,a=n.length;s1&&void 0!==arguments[1]&&arguments[1],i=arguments[2],n=this._getAllNodes().sort(function(e,t){return t.level-e.level}),s=Object.create(null),a=Object.keys(i);n.forEach(function(e){return e.setChecked(!1,!1)});for(var r=0,o=n.length;r-1){for(var c=l.parent;c&&c.level>0;)s[c.data[e]]=!0,c=c.parent;l.isLeaf||this.checkStrictly?l.setChecked(!0,!1):(l.setChecked(!0,!0),t&&function(){l.setChecked(!1,!1);!function e(t){t.childNodes.forEach(function(t){t.isLeaf||t.setChecked(!1,!1),e(t)})}(l)}())}else l.checked&&!s[u]&&l.setChecked(!1,!1)}},e.prototype.setCheckedNodes=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=this.key,n={};e.forEach(function(e){n[(e||{})[i]]=!0}),this._setCheckedKeys(i,t,n)},e.prototype.setCheckedKeys=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var i=this.key,n={};e.forEach(function(e){n[e]=!0}),this._setCheckedKeys(i,t,n)},e.prototype.setDefaultExpandedKeys=function(e){var t=this;e=e||[],this.defaultExpandedKeys=e,e.forEach(function(e){var i=t.getNode(e);i&&i.expand(null,t.autoExpandParent)})},e.prototype.setChecked=function(e,t,i){var n=this.getNode(e);n&&n.setChecked(!!t,i)},e.prototype.getCurrentNode=function(){return this.currentNode},e.prototype.setCurrentNode=function(e){this.currentNode=e},e.prototype.setUserCurrentNode=function(e){var t=e[this.key],i=this.nodesMap[t];this.setCurrentNode(i)},e.prototype.setCurrentNodeKey=function(e){var t=this.getNode(e);t&&(this.currentNode=t)},e}();t.default=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0,t.getChildState=void 0;var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=function(){function e(e,t){for(var i=0;i0&&s.lazy&&s.defaultExpandAll&&this.expand(),this.data){var o=s.defaultExpandedKeys,l=s.key;l&&o&&-1!==o.indexOf(this.key)&&this.expand(null,s.autoExpandParent),l&&void 0!==s.currentNodeKey&&this.key===s.currentNodeKey&&(s.currentNode=this),s.lazy&&s._initDefaultCheckedNode(this),this.updateLeafState()}}return e.prototype.setData=function(e){Array.isArray(e)||(0,l.markNodeData)(this,e),this.data=e,this.childNodes=[];var t=void 0;t=0===this.level&&this.data instanceof Array?this.data:d(this,"children")||[];for(var i=0,n=t.length;i-1&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(t,1)),this.updateLeafState()},e.prototype.removeChildByData=function(e){var t=null;this.childNodes.forEach(function(i){i.data===e&&(t=i)}),t&&this.removeChild(t)},e.prototype.expand=function(e,t){var i=this,n=function(){if(t)for(var n=i.parent;n.level>0;)n.expanded=!0,n=n.parent;i.expanded=!0,e&&e()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&(i.checked?i.setChecked(!0,!0):c(i),n())}):n()},e.prototype.doCreateChildren=function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild((0,o.default)({data:e},i))})},e.prototype.collapse=function(){this.expanded=!1},e.prototype.shouldLoadData=function(){return!0===this.store.lazy&&this.store.load&&!this.loaded},e.prototype.updateLeafState=function(){if(!0===this.store.lazy&&!0!==this.loaded&&void 0!==this.isLeafByUser)return void(this.isLeaf=this.isLeafByUser);var e=this.childNodes;if(!this.store.lazy||!0===this.store.lazy&&!0===this.loaded)return void(this.isLeaf=!e||0===e.length);this.isLeaf=!1},e.prototype.setChecked=function(e,t,i,n){var a=this;if(this.indeterminate="half"===e,this.checked=!0===e,!this.store.checkStrictly){if(!this.shouldLoadData()||this.store.checkDescendants){var r=function(){var i=u(a.childNodes),s=i.all,r=i.allWithoutDisable;a.isLeaf||s||!r||(a.checked=!1,e=!1);var o=function(){if(t){for(var i=a.childNodes,s=0,r=i.length;s1&&void 0!==arguments[1]?arguments[1]:{};if(!0!==this.store.lazy||!this.store.load||this.loaded||this.loading&&!Object.keys(i).length)e&&e.call(this);else{this.loading=!0;var n=function(n){t.loaded=!0,t.loading=!1,t.childNodes=[],t.doCreateChildren(n,i),t.updateLeafState(),e&&e.call(t,n)};this.store.load(this,n)}},a(e,[{key:"label",get:function(){return d(this,"label")}},{key:"icon",get:function(){return d(this,"icon")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}},{key:"disabled",get:function(){return d(this,"disabled")}}]),e}();t.default=f},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(308),s=i.n(n),a=i(309),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(29),a=n(s),r=i(14),o=n(r),l=i(1),u=n(l);t.default={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[u.default],props:{node:{default:function(){return{}}},props:{},renderContent:Function},components:{ElCollapseTransition:a.default,ElCheckbox:o.default,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,i=this.node,n=i.data,s=i.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:t.tree.$vnode.context,node:i,data:n,store:s}):e("span",{class:"el-tree-node__label"},[this.node.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!1,showCheckbox:!1,oldChecked:null,oldIndeterminate:null}},watch:{"node.indeterminate":function(e){this.handleSelectChange(this.node.checked,e)},"node.checked":function(e){this.handleSelectChange(e,this.node.indeterminate)},"node.expanded":function(e){var t=this;this.$nextTick(function(){return t.expanded=e}),e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e,t){var i=this.tree.nodeKey;return i&&e?e.data[i]:t},handleSelectChange:function(e,t){this.oldChecked!==e&&this.oldIndeterminate!==t&&this.tree.$emit("check-change",this.node.data,e,t),this.oldChecked=e,this.indeterminate=t},handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node),this.tree.$emit("current-change",e.currentNode?e.currentNode.data:null,e.currentNode),this.tree.currentNode=this,this.tree.expandOnClickNode&&this.handleExpandIconClick(),this.tree.$emit("node-click",this.node.data,this.node,this)},handleExpandIconClick:function(){this.node.isLeaf||(this.expanded?(this.tree.$emit("node-collapse",this.node.data,this.node,this),this.node.collapse()):(this.node.expand(),this.$emit("node-expand",this.node.data,this.node,this)))},handleCheckChange:function(e,t){this.node.setChecked(t.target.checked,!this.tree.checkStrictly)},handleChildNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,i)}},created:function(){var e=this,t=this.$parent;t.isTree?this.tree=t:this.tree=t.tree;var i=this.tree;i||console.warn("Can not find node's tree.");var n=i.props||{},s=n.children||"children";this.$watch("node.data."+s,function(){e.node.updateChildren()}),this.showCheckbox=i.showCheckbox,this.node.expanded&&(this.expanded=!0,this.childNodeRendered=!0),this.tree.accordion&&this.$on("tree-node-expand",function(t){e.node!==t&&e.node.collapse()})}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.node.visible,expression:"node.visible"}],staticClass:"el-tree-node",class:{"is-expanded":e.expanded,"is-current":e.tree.store.currentNode===e.node,"is-hidden":!e.node.visible},on:{click:function(t){t.stopPropagation(),e.handleClick(t)}}},[i("div",{staticClass:"el-tree-node__content",style:{"padding-left":(e.node.level-1)*e.tree.indent+"px"}},[i("span",{staticClass:"el-tree-node__expand-icon",class:{"is-leaf":e.node.isLeaf,expanded:!e.node.isLeaf&&e.expanded},on:{click:function(t){t.stopPropagation(),e.handleExpandIconClick(t)}}}),e.showCheckbox?i("el-checkbox",{attrs:{indeterminate:e.node.indeterminate,disabled:!!e.node.disabled},on:{change:e.handleCheckChange},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:e.node.checked,callback:function(t){e.$set(e.node,"checked",t)},expression:"node.checked"}}):e._e(),e.node.loading?i("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):e._e(),i("node-content",{attrs:{node:e.node}})],1),i("el-collapse-transition",[e.childNodeRendered?i("div",{directives:[{name:"show",rawName:"v-show",value:e.expanded,expression:"expanded"}],staticClass:"el-tree-node__children"},e._l(e.node.childNodes,function(t){return i("el-tree-node",{key:e.getNodeKey(t),attrs:{"render-content":e.renderContent,node:t},on:{"node-expand":e.handleChildNodeExpand}})})):e._e()])],1)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":e.highlightCurrent}},[e._l(e.root.childNodes,function(t){return i("el-tree-node",{key:e.getNodeKey(t),attrs:{node:t,props:e.props,"render-content":e.renderContent},on:{"node-expand":e.handleNodeExpand}})}),e.root.childNodes&&0!==e.root.childNodes.length?e._e():i("div",{staticClass:"el-tree__empty-block"},[i("span",{staticClass:"el-tree__empty-text"},[e._v(e._s(e.emptyText))])])],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(312),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(313),s=i.n(n),a=i(314),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n={success:"el-icon-success",warning:"el-icon-warning",error:"el-icon-error"};t.default={name:"ElAlert",props:{title:{type:String,default:"",required:!0},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:Boolean,center:Boolean},data:function(){return{visible:!0}},methods:{close:function(){this.visible=!1,this.$emit("close")}},computed:{typeClass:function(){return"el-alert--"+this.type},iconClass:function(){return n[this.type]||"el-icon-info"},isBigIcon:function(){return this.description||this.$slots.default?"is-big":""},isBoldTitle:function(){return this.description||this.$slots.default?"is-bold":""}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-alert-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-alert",class:[e.typeClass,e.center?"is-center":""],attrs:{role:"alert"}},[e.showIcon?i("i",{staticClass:"el-alert__icon",class:[e.iconClass,e.isBigIcon]}):e._e(),i("div",{staticClass:"el-alert__content"},[e.title?i("span",{staticClass:"el-alert__title",class:[e.isBoldTitle]},[e._v(e._s(e.title))]):e._e(),e._t("default",[e.description?i("p",{staticClass:"el-alert__description"},[e._v(e._s(e.description))]):e._e()]),i("i",{directives:[{name:"show",rawName:"v-show",value:e.closable,expression:"closable"}],staticClass:"el-alert__closebtn",class:{"is-customed":""!==e.closeText,"el-icon-close":""===e.closeText},on:{click:function(t){e.close()}}},[e._v(e._s(e.closeText))])],2)])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(316),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default=s.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),a=n(s),r=i(317),o=n(r),l=i(18),u=i(30),c=a.default.extend(o.default),d=void 0,h=[],f=1,p=function e(t){if(!a.default.prototype.$isServer){t=t||{};var i=t.onClose,n="notification_"+f++,s=t.position||"top-right";t.onClose=function(){e.close(n,i)},d=new c({data:t}),(0,u.isVNode)(t.message)&&(d.$slots.default=[t.message],t.message=""),d.id=n,d.vm=d.$mount(),document.body.appendChild(d.vm.$el),d.vm.visible=!0,d.dom=d.vm.$el,d.dom.style.zIndex=l.PopupManager.nextZIndex();var r=t.offset||0;return h.filter(function(e){return e.position===s}).forEach(function(e){r+=e.$el.offsetHeight+16}),r+=16,d.verticalOffset=r,h.push(d),d.vm}};["success","warning","info","error"].forEach(function(e){p[e]=function(t){return("string"==typeof t||(0,u.isVNode)(t))&&(t={message:t}),t.type=e,p(t)}}),p.close=function(e,t){var i=-1,n=h.length,s=h.filter(function(t,n){return t.id===e&&(i=n,!0)})[0];if(s&&("function"==typeof t&&t(s),h.splice(i,1),!(n<=1)))for(var a=s.position,r=s.dom.offsetHeight,o=i;o-1?"right":"left"},verticalProperty:function(){return/^top-/.test(this.position)?"top":"bottom"},positionStyle:function(){var e;return e={},e[this.verticalProperty]=this.verticalOffset+"px",e}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},click:function(){"function"==typeof this.onClick&&this.onClick()},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}},mounted:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-notification-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-notification",e.customClass,e.horizontalClass],style:e.positionStyle,on:{mouseenter:function(t){e.clearTimer()},mouseleave:function(t){e.startTimer()},click:e.click}},[e.type||e.iconClass?i("i",{staticClass:"el-notification__icon",class:[e.typeClass,e.iconClass]}):e._e(),i("div",{staticClass:"el-notification__group",class:{"is-with-icon":e.typeClass||e.iconClass}},[i("h2",{staticClass:"el-notification__title",domProps:{textContent:e._s(e.title)}}),i("div",{staticClass:"el-notification__content"},[e._t("default",[e.dangerouslyUseHTMLString?i("p",{domProps:{innerHTML:e._s(e.message)}}):i("p",[e._v(e._s(e.message))])])],2),e.showClose?i("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(t){t.stopPropagation(),e.close(t)}}}):e._e()])])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(321),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(322),s=i.n(n),a=i(326),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(56),a=n(s),r=i(323),o=n(r),l=i(1),u=n(l);t.default={name:"ElSlider",mixins:[u.default],props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},height:{type:String},debounce:{type:Number,default:300},label:{type:String}},components:{ElInputNumber:a.default,SliderButton:o.default},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1,sliderSize:1}},watch:{value:function(e,t){this.dragging||Array.isArray(e)&&Array.isArray(t)&&e.every(function(e,i){return e===t[i]})||this.setValues()},dragging:function(e){e||this.setValues()},firstValue:function(e){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",e)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var e=this;return this.range?![this.minValue,this.maxValue].every(function(t,i){return t===e.oldValue[i]}):this.value!==this.oldValue},setValues:function(){var e=this.value;this.range&&Array.isArray(e)?e[1]this.max?this.$emit("input",[this.max,this.max]):e[0]this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(ethis.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(this.dispatch("ElFormItem","el.form.change",e),this.oldValue=e)))},setPosition:function(e){var t=this.min+e*(this.max-this.min)/100;if(!this.range)return void this.$refs.button1.setPosition(e);var i=void 0;i=Math.abs(this.minValue-t)this.secondValue?"button1":"button2",this.$refs[i].setPosition(e)},onSliderClick:function(e){if(!this.disabled&&!this.dragging){if(this.resetSize(),this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.sliderSize*100)}else{var i=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-i)/this.sliderSize*100)}this.emitChange()}},resetSize:function(){this.$refs.slider&&(this.sliderSize=this.$refs.slider["client"+(this.vertical?"Height":"Width")])},emitChange:function(){var e=this;this.$nextTick(function(){e.$emit("change",e.range?[e.minValue,e.maxValue]:e.value)})}},computed:{stops:function(){var e=this;if(0===this.step)return[];for(var t=(this.max-this.min)/this.step,i=100*this.step/(this.max-this.min),n=[],s=1;s100*(e.maxValue-e.min)/(e.max-e.min)}):n.filter(function(t){return t>100*(e.firstValue-e.min)/(e.max-e.min)})},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barSize:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barStart:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var e=[this.min,this.max,this.step].map(function(e){var t=(""+e).split(".")[1];return t?t.length:0});return Math.max.apply(null,e)},runwayStyle:function(){return this.vertical?{height:this.height}:{}},barStyle:function(){return this.vertical?{height:this.barSize,bottom:this.barStart}:{width:this.barSize,left:this.barStart}}},mounted:function(){var e=void 0;this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue],e=this.firstValue+"-"+this.secondValue):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue,e=this.firstValue),this.$el.setAttribute("aria-valuetext",e),this.$el.setAttribute("aria-label",this.label?this.label:"slider between "+this.min+" and "+this.max),this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(324),s=i.n(n),a=i(325),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(39),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"ElSliderButton",components:{ElTooltip:s.default},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1}},data:function(){return{hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.disabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value},wrapperStyle:function(){return this.vertical?{bottom:this.currentPosition}:{left:this.currentPosition}}},watch:{dragging:function(e){this.$parent.dragging=e}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(e){this.disabled||(e.preventDefault(),this.onDragStart(e),window.addEventListener("mousemove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onLeftKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)-this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onRightKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)+this.step/(this.max-this.min)*100,this.setPosition(this.newPosition))},onDragStart:function(e){this.dragging=!0,this.isClick=!0,this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;this.vertical?(this.currentY=e.clientY,t=(this.startY-this.currentY)/this.$parent.sliderSize*100):(this.currentX=e.clientX,t=(this.currentX-this.startX)/this.$parent.sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},onDragEnd:function(){var e=this;this.dragging&&(setTimeout(function(){e.dragging=!1,e.hideTooltip(),e.isClick||(e.setPosition(e.newPosition),e.$parent.emitChange())},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){var t=this;if(null!==e){e<0?e=0:e>100&&(e=100);var i=100/((this.max-this.min)/this.step),n=Math.round(e/i),s=n*i*(this.max-this.min)*.01+this.min;s=parseFloat(s.toFixed(this.precision)),this.$emit("input",s),this.$nextTick(function(){t.$refs.tooltip&&t.$refs.tooltip.updatePopper()}),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:e.hovering,dragging:e.dragging},style:e.wrapperStyle,attrs:{tabindex:"0"},on:{mouseenter:e.handleMouseEnter,mouseleave:e.handleMouseLeave,mousedown:e.onButtonDown,focus:e.handleMouseEnter,blur:e.handleMouseLeave,keydown:[function(t){return"button"in t||!e._k(t.keyCode,"left",37,t.key)?"button"in t&&0!==t.button?null:void e.onLeftKeyDown(t):null},function(t){return"button"in t||!e._k(t.keyCode,"right",39,t.key)?"button"in t&&2!==t.button?null:void e.onRightKeyDown(t):null},function(t){if(!("button"in t)&&e._k(t.keyCode,"down",40,t.key))return null;t.preventDefault(),e.onLeftKeyDown(t)},function(t){if(!("button"in t)&&e._k(t.keyCode,"up",38,t.key))return null;t.preventDefault(),e.onRightKeyDown(t)}]}},[i("el-tooltip",{ref:"tooltip",attrs:{placement:"top",disabled:!e.showTooltip}},[i("span",{attrs:{slot:"content"},slot:"content"},[e._v(e._s(e.formatValue))]),i("div",{staticClass:"el-slider__button",class:{hover:e.hovering,dragging:e.dragging}})])],1)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-slider",class:{"is-vertical":e.vertical,"el-slider--with-input":e.showInput},attrs:{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-orientation":e.vertical?"vertical":"horizontal","aria-disabled":e.disabled}},[e.showInput&&!e.range?i("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:e.step,disabled:e.disabled,controls:e.showInputControls,min:e.min,max:e.max,debounce:e.debounce,size:"small"},on:{change:function(t){e.$nextTick(e.emitChange)}},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}):e._e(),i("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":e.showInput,disabled:e.disabled},style:e.runwayStyle,on:{click:e.onSliderClick}},[i("div",{staticClass:"el-slider__bar",style:e.barStyle}),i("slider-button",{ref:"button1",attrs:{vertical:e.vertical},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}),e.range?i("slider-button",{ref:"button2",attrs:{vertical:e.vertical},model:{value:e.secondValue,callback:function(t){e.secondValue=t},expression:"secondValue"}}):e._e(),e._l(e.stops,function(t){return e.showStops?i("div",{staticClass:"el-slider__stop",style:e.vertical?{bottom:t+"%"}:{left:t+"%"}}):e._e()})],2)],1)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(328),a=n(s),r=i(331),o=n(r);t.default={install:function(e){e.use(a.default),e.prototype.$loading=o.default},directive:a.default,service:o.default}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var s=i(2),a=n(s),r=i(62),o=n(r),l=i(4),u=a.default.extend(o.default);t.install=function(e){if(!e.prototype.$isServer){var t=function(t,n){n.value?e.nextTick(function(){n.modifiers.fullscreen?(t.originalPosition=(0,l.getStyle)(document.body,"position"),t.originalOverflow=(0,l.getStyle)(document.body,"overflow"),(0,l.addClass)(t.mask,"is-fullscreen"),i(document.body,t,n)):((0,l.removeClass)(t.mask,"is-fullscreen"),n.modifiers.body?(t.originalPosition=(0,l.getStyle)(document.body,"position"),["top","left"].forEach(function(e){var i="top"===e?"scrollTop":"scrollLeft";t.maskStyle[e]=t.getBoundingClientRect()[e]+document.body[i]+document.documentElement[i]+"px"}),["height","width"].forEach(function(e){t.maskStyle[e]=t.getBoundingClientRect()[e]+"px"}),i(document.body,t,n)):(t.originalPosition=(0,l.getStyle)(t,"position"),i(t,t,n)))}):t.domVisible&&(t.instance.$on("after-leave",function(e){t.domVisible=!1,n.modifiers.fullscreen&&"hidden"!==t.originalOverflow&&(document.body.style.overflow=t.originalOverflow),n.modifiers.fullscreen||n.modifiers.body?document.body.style.position=t.originalPosition:t.style.position=t.originalPosition}),t.instance.visible=!1)},i=function(t,i,n){i.domVisible||"none"===(0,l.getStyle)(i,"display")||"hidden"===(0,l.getStyle)(i,"visibility")||(Object.keys(i.maskStyle).forEach(function(e){i.mask.style[e]=i.maskStyle[e]}),"absolute"!==i.originalPosition&&"fixed"!==i.originalPosition&&(t.style.position="relative"),n.modifiers.fullscreen&&n.modifiers.lock&&(t.style.overflow="hidden"),i.domVisible=!0,t.appendChild(i.mask),e.nextTick(function(){i.instance.visible=!0}),i.domInserted=!0)};e.directive("loading",{bind:function(e,i,n){var s=e.getAttribute("element-loading-text"),a=e.getAttribute("element-loading-spinner"),r=e.getAttribute("element-loading-background"),o=n.context,l=new u({el:document.createElement("div"),data:{text:o&&o[s]||s,spinner:o&&o[a]||a,background:o&&o[r]||r,fullscreen:!!i.modifiers.fullscreen}});e.instance=l,e.mask=l.$el,e.maskStyle={},t(e,i)},update:function(e,i){e.instance.setText(e.getAttribute("element-loading-text")),i.oldValue!==i.value&&t(e,i)},unbind:function(e,t){e.domInserted&&e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask)}})}}},function(e,t,i){"use strict";t.__esModule=!0,t.default={data:function(){return{text:null,spinner:null,background:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}],style:{backgroundColor:e.background||""}},[i("div",{staticClass:"el-loading-spinner"},[e.spinner?i("i",{class:e.spinner}):i("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?i("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),a=n(s),r=i(62),o=n(r),l=i(4),u=i(15),c=n(u),d=a.default.extend(o.default),h={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},f=void 0;d.prototype.originalPosition="",d.prototype.originalOverflow="",d.prototype.close=function(){var e=this;this.fullscreen&&(f=void 0),this.$on("after-leave",function(t){e.fullscreen&&"hidden"!==e.originalOverflow&&(document.body.style.overflow=e.originalOverflow),e.fullscreen||e.body?document.body.style.position=e.originalPosition:e.target.style.position=e.originalPosition,e.$el&&e.$el.parentNode&&e.$el.parentNode.removeChild(e.$el),e.$destroy()}),this.visible=!1};var p=function(e,t,i){var n={};e.fullscreen?(i.originalPosition=(0,l.getStyle)(document.body,"position"),i.originalOverflow=(0,l.getStyle)(document.body,"overflow")):e.body?(i.originalPosition=(0,l.getStyle)(document.body,"position"),["top","left"].forEach(function(t){var i="top"===t?"scrollTop":"scrollLeft";n[t]=e.target.getBoundingClientRect()[t]+document.body[i]+document.documentElement[i]+"px"}),["height","width"].forEach(function(t){n[t]=e.target.getBoundingClientRect()[t]+"px"})):i.originalPosition=(0,l.getStyle)(t,"position"),Object.keys(n).forEach(function(e){i.$el.style[e]=n[e]})},m=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!a.default.prototype.$isServer){if(e=(0,c.default)({},h,e),"string"==typeof e.target&&(e.target=document.querySelector(e.target)),e.target=e.target||document.body,e.target!==document.body?e.fullscreen=!1:e.body=!0,e.fullscreen&&f)return f;var t=e.body?document.body:e.target,i=new d({el:document.createElement("div"),data:e});return p(e,t,i),"absolute"!==i.originalPosition&&"fixed"!==i.originalPosition&&(t.style.position="relative"),e.fullscreen&&e.lock&&(t.style.overflow="hidden"),t.appendChild(i.$el),a.default.nextTick(function(){i.visible=!0}),e.fullscreen&&(f=i),i}};t.default=m},function(e,t,i){"use strict";t.__esModule=!0;var n=i(333),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(334),s=i.n(n),a=i(335),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElIcon",props:{name:String}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("i",{class:"el-icon-"+e.name})},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(337),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElRow",componentName:"ElRow",props:{tag:{type:String,default:"div"},gutter:Number,type:String,justify:{type:String,default:"start"},align:{type:String,default:"top"}},computed:{style:function(){var e={};return this.gutter&&(e.marginLeft="-"+this.gutter/2+"px",e.marginRight=e.marginLeft),e}},render:function(e){return e(this.tag,{class:["el-row","start"!==this.justify?"is-justify-"+this.justify:"","top"!==this.align?"is-align-"+this.align:"",{"el-row--flex":"flex"===this.type}],style:this.style},this.$slots.default)}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(339),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default={name:"ElCol",props:{span:{type:Number,default:24},tag:{type:String,default:"div"},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object]},computed:{gutter:function(){for(var e=this.$parent;e&&"ElRow"!==e.$options.componentName;)e=e.$parent;return e?e.gutter:0}},render:function(e){var t=this,i=[],s={};return this.gutter&&(s.paddingLeft=this.gutter/2+"px",s.paddingRight=s.paddingLeft),["span","offset","pull","push"].forEach(function(e){t[e]&&i.push("span"!==e?"el-col-"+e+"-"+t[e]:"el-col-"+t[e])}),["xs","sm","md","lg"].forEach(function(e){"number"==typeof t[e]?i.push("el-col-"+e+"-"+t[e]):"object"===n(t[e])&&function(){var n=t[e];Object.keys(n).forEach(function(t){i.push("span"!==t?"el-col-"+e+"-"+t+"-"+n[t]:"el-col-"+e+"-"+n[t])})}()}),e(this.tag,{class:["el-col",i],style:s},this.$slots.default)}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(341),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(342),s=i.n(n),a=i(0),r=a(s.a,null,!1,null,null,null);t.default=r.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}t.__esModule=!0;var a=i(343),r=n(a),o=i(349),l=n(o),u=i(354),c=n(u),d=i(43),h=n(d),f=i(356),p=n(f);t.default={name:"ElUpload",mixins:[p.default],components:{ElProgress:h.default,UploadList:r.default,Upload:l.default,IframeUpload:c.default},provide:{uploader:void 0},props:{action:{type:String,required:!0},headers:{type:Object,default:function(){return{}}},data:Object,multiple:Boolean,name:{type:String,default:"file"},drag:Boolean,dragger:Boolean,withCredentials:Boolean,showFileList:{type:Boolean,default:!0},accept:String,type:{type:String,default:"select"},beforeUpload:Function,onRemove:{type:Function,default:s},onChange:{type:Function,default:s},onPreview:{type:Function},onSuccess:{type:Function,default:s},onProgress:{type:Function,default:s},onError:{type:Function,default:s},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean,limit:Number,onExceed:{type:Function,default:s}},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},watch:{fileList:{immediate:!0,handler:function(e){var t=this;this.uploadFiles=e.map(function(e){return e.uid=e.uid||Date.now()+t.tempIndex++,e.status="success",e})}}},methods:{handleStart:function(e){e.uid=Date.now()+this.tempIndex++;var t={status:"ready",name:e.name,size:e.size,percentage:0,uid:e.uid,raw:e};try{t.url=URL.createObjectURL(e)}catch(e){return void console.error(e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var i=this.getFile(t);this.onProgress(e,i,this.uploadFiles),i.status="uploading",i.percentage=e.percent||0},handleSuccess:function(e,t){var i=this.getFile(t);i&&(i.status="success",i.response=e,this.onSuccess(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles))},handleError:function(e,t){var i=this.getFile(t),n=this.uploadFiles;i.status="fail",n.splice(n.indexOf(i),1),this.onError(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles)},handleRemove:function(e,t){t&&(e=this.getFile(t)),this.abort(e);var i=this.uploadFiles;i.splice(i.indexOf(e),1),this.onRemove(e,i)},getFile:function(e){var t=this.uploadFiles,i=void 0;return t.every(function(t){return!(i=e.uid===t.uid?t:null)}),i},abort:function(e){this.$refs["upload-inner"].abort(e)},clearFiles:function(){this.uploadFiles=[]},submit:function(){var e=this;this.uploadFiles.filter(function(e){return"ready"===e.status}).forEach(function(t){e.$refs["upload-inner"].upload(t.raw)})},getMigratingConfig:function(){return{props:{"default-file-list":"default-file-list is renamed to file-list.","show-upload-list":"show-upload-list is renamed to show-file-list.","thumbnail-mode":"thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan"}}}},render:function(e){var t=void 0;this.showFileList&&(t=e(r.default,{attrs:{disabled:this.disabled,listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}},[]));var i={props:{type:this.type,drag:this.drag,action:this.action,multiple:this.multiple,"before-upload":this.beforeUpload,"with-credentials":this.withCredentials,headers:this.headers,name:this.name,data:this.data,accept:this.accept,fileList:this.uploadFiles,autoUpload:this.autoUpload,listType:this.listType,disabled:this.disabled,limit:this.limit,"on-exceed":this.onExceed,"on-start":this.handleStart,"on-progress":this.handleProgress,"on-success":this.handleSuccess,"on-error":this.handleError,"on-preview":this.onPreview,"on-remove":this.handleRemove,"http-request":this.httpRequest},ref:"upload-inner"},n=this.$slots.trigger||this.$slots.default,s="undefined"!=typeof FormData||this.$isServer?e("upload",i,[n]):e("iframeUpload",i,[n]);return e("div",null,["picture-card"===this.listType?t:"",this.$slots.trigger?[s,this.$slots.default]:s,this.$slots.tip,"picture-card"!==this.listType?t:""])}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(344),s=i.n(n),a=i(348),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(5),a=n(s),r=i(43),o=n(r);t.default={mixins:[a.default],data:function(){return{focusing:!1}},components:{ElProgress:o.default},props:{files:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(346),s=i.n(n),a=i(347),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElProgress",props:{type:{type:String,default:"line",validator:function(e){return["line","circle"].indexOf(e)>-1}},percentage:{type:Number,default:0,required:!0,validator:function(e){return e>=0&&e<=100}},status:{type:String},strokeWidth:{type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var e=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10);return"M 50 50 m 0 -"+e+" a "+e+" "+e+" 0 1 1 0 "+2*e+" a "+e+" "+e+" 0 1 1 0 -"+2*e},perimeter:function(){var e=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*e},circlePathStyle:function(){var e=this.perimeter;return{strokeDasharray:e+"px,"+e+"px",strokeDashoffset:(1-this.percentage/100)*e+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var e;switch(this.status){case"success":e="#13ce66";break;case"exception":e="#ff4949";break;default:e="#20a0ff"}return e},iconClass:function(){return"line"===this.type?"success"===this.status?"el-icon-circle-check":"el-icon-circle-cross":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-progress",class:["el-progress--"+e.type,e.status?"is-"+e.status:"",{"el-progress--without-text":!e.showText,"el-progress--text-inside":e.textInside}],attrs:{role:"progressbar","aria-valuenow":e.percentage,"aria-valuemin":"0","aria-valuemax":"100"}},["line"===e.type?i("div",{staticClass:"el-progress-bar"},[i("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[i("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?i("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):i("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[i("svg",{attrs:{viewBox:"0 0 100 100"}},[i("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),i("path",{staticClass:"el-progress-circle__path",style:e.circlePathStyle,attrs:{d:e.trackPath,"stroke-linecap":"round",stroke:e.stroke,"stroke-width":e.relativeStrokeWidth,fill:"none"}})])]),e.showText&&!e.textInside?i("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?i("i",{class:e.iconClass}):[e._v(e._s(e.percentage)+"%")]],2):e._e()])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition-group",{class:["el-upload-list","el-upload-list--"+e.listType,{"is-disabled":e.disabled}],attrs:{tag:"ul",name:"el-list"}},e._l(e.files,function(t,n){return i("li",{key:n,class:["el-upload-list__item","is-"+t.status,e.focusing?"focusing":""],attrs:{tabindex:"0"},on:{keydown:function(i){if(!("button"in i)&&e._k(i.keyCode,"delete",[8,46],i.key))return null;e.$emit("remove",t)},focus:function(t){e.focusing=!0},blur:function(t){e.focusing=!1},click:function(t){e.focusing=!1}}},["uploading"!==t.status&&["picture-card","picture"].indexOf(e.listType)>-1?i("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):e._e(),i("a",{staticClass:"el-upload-list__item-name",on:{click:function(i){e.handleClick(t)}}},[i("i",{staticClass:"el-icon-document"}),e._v(e._s(t.name)+"\n ")]),i("label",{staticClass:"el-upload-list__item-status-label"},[i("i",{class:{"el-icon-upload-success":!0,"el-icon-circle-check":"text"===e.listType,"el-icon-check":["picture-card","picture"].indexOf(e.listType)>-1}})]),e.disabled?e._e():i("i",{staticClass:"el-icon-close",on:{click:function(i){e.$emit("remove",t)}}}),e.disabled?e._e():i("i",{staticClass:"el-icon-close-tip"},[e._v(e._s(e.t("el.upload.deleteTip")))]),"uploading"===t.status?i("el-progress",{attrs:{type:"picture-card"===e.listType?"circle":"line","stroke-width":"picture-card"===e.listType?6:2,percentage:e.parsePercentage(t.percentage)}}):e._e(),"picture-card"===e.listType?i("span",{staticClass:"el-upload-list__item-actions"},[e.handlePreview&&"picture-card"===e.listType?i("span",{staticClass:"el-upload-list__item-preview",on:{click:function(i){e.handlePreview(t)}}},[i("i",{staticClass:"el-icon-view"})]):e._e(),e.disabled?e._e():i("span",{staticClass:"el-upload-list__item-delete",on:{click:function(i){e.$emit("remove",t)}}},[i("i",{staticClass:"el-icon-delete2"})])]):e._e()],1)}))},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(350),s=i.n(n),a=i(0),r=a(s.a,null,!1,null,null,null);t.default=r.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(63),a=n(s),r=i(351),o=n(r),l=i(64),u=n(l);t.default={inject:["uploader"],components:{UploadDragger:u.default},props:{type:String,action:{type:String,required:!0},name:{type:String,default:"file"},data:Object,headers:Object,withCredentials:Boolean,multiple:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,drag:Boolean,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},fileList:Array,autoUpload:Boolean,listType:String,httpRequest:{type:Function,default:o.default},disabled:Boolean,limit:Number,onExceed:Function},data:function(){return{mouseover:!1,reqs:{}}},methods:{isImage:function(e){return-1!==e.indexOf("image")},handleChange:function(e){var t=e.target.files;t&&this.uploadFiles(t)},uploadFiles:function(e){var t=this;if(this.limit&&this.fileList.length+e.length>this.limit)return void(this.onExceed&&this.onExceed(e,this.fileList));var i=Array.prototype.slice.call(e);this.multiple||(i=i.slice(0,1)),0!==i.length&&i.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})},upload:function(e,t){var i=this;if(this.$refs.input.value=null,!this.beforeUpload)return this.post(e);var n=this.beforeUpload(e);n&&n.then?n.then(function(t){"[object File]"===Object.prototype.toString.call(t)?i.post(t):i.post(e)},function(){i.onRemove(null,e)}):!1!==n?this.post(e):this.onRemove(null,e)},abort:function(e){var t=this.reqs;if(e){var i=e;e.uid&&(i=e.uid),t[i]&&t[i].abort()}else Object.keys(t).forEach(function(e){t[e]&&t[e].abort(),delete t[e]})},post:function(e){var t=this,i=e.uid,n={headers:this.headers,withCredentials:this.withCredentials,file:e,data:this.data,filename:this.name,action:this.action,onProgress:function(i){t.onProgress(i,e)},onSuccess:function(n){t.onSuccess(n,e),delete t.reqs[i]},onError:function(n){t.onError(n,e),delete t.reqs[i]}},s=this.httpRequest(n);this.reqs[i]=s,s&&s.then&&s.then(n.onSuccess,n.onError)},handleClick:function(){this.disabled||(this.$refs.input.value=null,this.$refs.input.click())},handleKeydown:function(e){13!==e.keyCode&&32!==e.keyCode||this.handleClick()}},render:function(e){var t=this.handleClick,i=this.drag,n=this.name,s=this.handleChange,r=this.multiple,o=this.accept,l=this.listType,u=this.uploadFiles,c=this.disabled,d=this.handleKeydown,h={class:{"el-upload":!0},on:{click:t,keydown:d}};return h.class["el-upload--"+l]=!0,e("div",(0,a.default)([h,{attrs:{tabindex:"0"}}]),[i?e("upload-dragger",{attrs:{disabled:c},on:{file:u}},[this.$slots.default]):this.$slots.default,e("input",{class:"el-upload__input",attrs:{type:"file",name:n,multiple:r,accept:o},ref:"input",on:{change:s}},[])])}}},function(e,t,i){"use strict";function n(e,t,i){var n=void 0;n=i.response?i.status+" "+(i.response.error||i.response):i.responseText?i.status+" "+i.responseText:"fail to post "+e+" "+i.status;var s=new Error(n);return s.status=i.status,s.method="post",s.url=e,s}function s(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}function a(e){if("undefined"!=typeof XMLHttpRequest){var t=new XMLHttpRequest,i=e.action;t.upload&&(t.upload.onprogress=function(t){t.total>0&&(t.percent=t.loaded/t.total*100),e.onProgress(t)});var a=new FormData;e.data&&Object.keys(e.data).forEach(function(t){a.append(t,e.data[t])}),a.append(e.filename,e.file),t.onerror=function(t){e.onError(t)},t.onload=function(){if(t.status<200||t.status>=300)return e.onError(n(i,e,t));e.onSuccess(s(t))},t.open("post",i,!0),e.withCredentials&&"withCredentials"in t&&(t.withCredentials=!0);var r=e.headers||{};for(var o in r)r.hasOwnProperty(o)&&null!==r[o]&&t.setRequestHeader(o,r[o]);return t.send(a),t}}t.__esModule=!0,t.default=a},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElUploadDrag",props:{disabled:Boolean},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){this.disabled||(this.dragover=!1,this.$emit("file",e.dataTransfer.files))}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-upload-dragger",class:{"is-dragover":e.dragover},on:{drop:function(t){t.preventDefault(),e.onDrop(t)},dragover:function(t){t.preventDefault(),e.onDragover(t)},dragleave:function(t){t.preventDefault(),e.dragover=!1}}},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(355),s=i.n(n),a=i(0),r=a(s.a,null,!1,null,null,null);t.default=r.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(64),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={components:{UploadDragger:s.default},props:{type:String,data:{},action:{type:String,required:!0},name:{type:String,default:"file"},withCredentials:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},drag:Boolean,listType:String,disabled:Boolean,limit:Number,onExceed:Function},data:function(){return{mouseover:!1,domain:"",file:null,submitting:!1}},methods:{isImage:function(e){return-1!==e.indexOf("image")},handleClick:function(){this.disabled||this.$refs.input.click()},handleChange:function(e){var t=e.target.value;t&&this.uploadFiles(t)},uploadFiles:function(e){if(this.limit&&this.$parent.uploadFiles.length+e.length>this.limit)return void(this.onExceed&&this.onExceed(this.fileList));if(!this.submitting){this.submitting=!0,this.file=e,this.onStart(e);var t=this.getFormNode(),i=this.getFormDataNode(),n=this.data;"function"==typeof n&&(n=n(e));var s=[];for(var a in n)n.hasOwnProperty(a)&&s.push('');i.innerHTML=s.join(""),t.submit(),i.innerHTML=""}},getFormNode:function(){return this.$refs.form},getFormDataNode:function(){return this.$refs.data}},created:function(){this.frameName="frame-"+Date.now()},mounted:function(){var e=this;!this.$isServer&&window.addEventListener("message",function(t){if(e.file){var i=new URL(e.action).origin;if(t.origin===i){var n=t.data;"success"===n.result?e.onSuccess(n,e.file):"failed"===n.result&&e.onError(n,e.file),e.submitting=!1,e.file=null}}},!1)},render:function(e){var t=this.drag,i=this.uploadFiles,n=this.listType,s=this.frameName,a=this.disabled,r={"el-upload":!0};return r["el-upload--"+n]=!0,e("div",{class:r,on:{click:this.handleClick},nativeOn:{drop:this.onDrop,dragover:this.handleDragover,dragleave:this.handleDragleave}},[e("iframe",{on:{load:this.onload},ref:"iframe",attrs:{name:s}},[]),e("form",{ref:"form",attrs:{action:this.action,target:s,enctype:"multipart/form-data",method:"POST"}},[e("input",{class:"el-upload__input",attrs:{type:"file",name:"file",accept:this.accept},ref:"input",on:{change:this.handleChange}},[]),e("input",{attrs:{type:"hidden",name:"documentDomain",value:this.$isServer?"":document.domain}},[]),e("span",{ref:"data"},[])]),t?e("upload-dragger",{on:{file:i},attrs:{disabled:a}},[this.$slots.default]):this.$slots.default])}}},function(e,t,i){"use strict";t.__esModule=!0,t.default={mounted:function(){return},methods:{getMigratingConfig:function(){return{props:{},events:{}}}}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(358),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(359),s=i.n(n),a=i(360),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{staticClass:"el-spinner"},[i("svg",{staticClass:"el-spinner-inner",style:{width:e.radius/2+"px",height:e.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:e.strokeColor,"stroke-width":e.strokeWidth}})])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(362),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default=s.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),a=n(s),r=i(363),o=n(r),l=i(18),u=i(30),c=a.default.extend(o.default),d=void 0,h=[],f=1,p=function e(t){if(!a.default.prototype.$isServer){t=t||{},"string"==typeof t&&(t={message:t});var i=t.onClose,n="message_"+f++;return t.onClose=function(){e.close(n,i)},d=new c({data:t}),d.id=n,(0,u.isVNode)(d.message)&&(d.$slots.default=[d.message],d.message=null),d.vm=d.$mount(),document.body.appendChild(d.vm.$el),d.vm.visible=!0,d.dom=d.vm.$el,d.dom.style.zIndex=l.PopupManager.nextZIndex(),h.push(d),d.vm}};["success","warning","info","error"].forEach(function(e){p[e]=function(t){return"string"==typeof t&&(t={message:t}),t.type=e,p(t)}}),p.close=function(e,t){for(var i=0,n=h.length;i=0;e--)h[e].close()},t.default=p},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(364),s=i.n(n),a=i(365),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n={success:"success",info:"info",warning:"warning",error:"error"};t.default={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null,dangerouslyUseHTMLString:!1,center:!1,initFocus:null,originFocus:null}},computed:{iconWrapClass:function(){var e=["el-message__icon"];return this.type&&!this.iconClass&&e.push("el-message__icon--"+this.type),e},typeClass:function(){return this.type&&!this.iconClass?"el-message__icon el-icon-"+n[this.type]:""}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this),this.originFocus&&this.originFocus.focus()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))},keydown:function(e){46===e.keyCode||8===e.keyCode?this.clearTimer():27===e.keyCode?this.closed||this.close():this.startTimer()}},mounted:function(){var e=this;this.startTimer(),this.originFocus=document.activeElement,this.initFocus=this.showClose?this.$el.querySelector(".el-icon-close"):this.$el.querySelector(".el-message__content"),setTimeout(function(){e.initFocus&&e.initFocus.focus()}),document.addEventListener("keydown",this.keydown)},beforeDestroy:function(){document.removeEventListener("keydown",this.keydown)}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-message-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],class:["el-message",e.type&&!e.iconClass?"el-message--"+e.type:"",e.center?"is-center":"",e.customClass],attrs:{role:"alertdialog"},on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?i("i",{class:e.iconClass}):i("i",{class:e.typeClass}),e._t("default",[e.dangerouslyUseHTMLString?i("p",{staticClass:"el-message__content",attrs:{tabindex:"0"},domProps:{innerHTML:e._s(e.message)}}):i("p",{staticClass:"el-message__content",attrs:{tabindex:"0"}},[e._v(e._s(e.message))])]),e.showClose?i("i",{staticClass:"el-message__closeBtn el-icon-close",attrs:{tabindex:"0",role:"button","aria-label":"close"},on:{click:e.close,keydown:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key))return null;t.stopPropagation(),e.close(t)}}}):e._e()],2)])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(367),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(368),s=i.n(n),a=i(369),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.disabled&&this.valueDecimal>0&&e-1this.value,i=this.allowHalf&&this.pointerAtLeftHalf&&e-.5<=this.currentValue&&e>this.currentValue;return t||i},getIconStyle:function(e){var t=this.disabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.disabled||(this.allowHalf&&this.pointerAtLeftHalf?(this.$emit("input",this.currentValue),this.$emit("change",this.currentValue)):(this.$emit("input",e),this.$emit("change",e)))},handelKey:function(e){var t=this.currentValue,i=e.keyCode;38===i||39===i?(this.allowHalf?t+=.5:t+=1,e.stopPropagation(),e.preventDefault()):37!==i&&40!==i||(this.allowHalf?t-=.5:t-=1,e.stopPropagation(),e.preventDefault()),t=t<0?0:t,t=t>this.max?this.max:t,this.$emit("input",t),this.$emit("change",t)},setCurrentValue:function(e,t){if(!this.disabled){if(this.allowHalf){var i=t.target;(0,n.hasClass)(i,"el-rate__item")&&(i=i.querySelector(".el-rate__icon")),(0,n.hasClass)(i,"el-rate__decimal")&&(i=i.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=i.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.disabled||(this.allowHalf&&(this.pointerAtLeftHalf=this.value!==Math.floor(this.value)),this.currentValue=this.value,this.hoverIndex=-1)}},created:function(){this.value||this.$emit("input",0),this.classMap={lowClass:this.iconClasses[0],mediumClass:this.iconClasses[1],highClass:this.iconClasses[2],voidClass:this.voidIconClass,disabledVoidClass:this.disabledVoidIconClass}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-rate",attrs:{role:"slider","aria-valuenow":e.currentValue,"aria-valuetext":e.text,"aria-valuemin":"0","aria-valuemax":e.max,tabindex:"0"},on:{keydown:e.handelKey}},[e._l(e.max,function(t){return i("span",{staticClass:"el-rate__item",style:{cursor:e.disabled?"auto":"pointer"},on:{mousemove:function(i){e.setCurrentValue(t,i)},mouseleave:e.resetCurrentValue,click:function(i){e.selectValue(t)}}},[i("i",{staticClass:"el-rate__icon",class:[e.classes[t-1],{hover:e.hoverIndex===t}],style:e.getIconStyle(t)},[e.showDecimalIcon(t)?i("i",{staticClass:"el-rate__decimal",class:e.decimalIconClass,style:e.decimalStyle}):e._e()])])}),e.showText||e.showScore?i("span",{staticClass:"el-rate__text",style:{color:e.textColor}},[e._v(e._s(e.text))]):e._e()],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(379),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(380),s=i.n(n),a=i(381),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElSteps",props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,center:Boolean,simple:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){var t=this;e.forEach(function(e,t){e.index=t}),this.center&&function(){var i=e.length;t.$nextTick(function(){t.stepOffset=e[i-1].$el.getBoundingClientRect().width/(i-1)})}()}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-steps",class:[!e.simple&&"el-steps--"+e.direction,e.simple&&"el-steps--simple"]},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(383),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(384),s=i.n(n),a=i(385),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,lineStyle:{},internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},beforeDestroy:function(){var e=this.$parent.steps,t=e.indexOf(this);t>=0&&e.splice(t,1)},computed:{currentStatus:function(){return this.status||this.internalStatus},prevStatus:function(){var e=this.$parent.steps[this.index-1];return e?e.currentStatus:"wait"},isCenter:function(){return this.$parent.alignCenter},isVertical:function(){return"vertical"===this.$parent.direction},isSimple:function(){return this.$parent.simple},isLast:function(){var e=this.$parent;return e.steps[e.steps.length-1]===this},stepsCount:function(){return this.$parent.steps.length},space:function(){var e=this.isSimple,t=this.$parent.space;return e?"":t},style:function(){var e=this.$parent,t=e.steps.length;return{flexBasis:"number"==typeof this.space?this.space+"px":this.space?this.space:100/(t-1)+"%"}}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index&&"error"!==this.prevStatus?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,i={};i.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?(this.currentStatus,t=0):"wait"===e&&(t=0,i.transitionDelay=-150*this.index+"ms"),i.borderWidth=t?"1px":0,"vertical"===this.$parent.direction?i.height=t+"%":i.width=t+"%",this.lineStyle=i}},mounted:function(){var e=this,t=this.$watch("index",function(i){e.$watch("$parent.active",e.updateStatus,{immediate:!0}),t()})}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-step",class:[!e.isSimple&&"is-"+e.$parent.direction,e.isSimple&&"is-simple",e.isLast&&!e.space&&!e.isCenter&&"is-flex",e.isCenter&&!e.isVertical&&!e.isSimple&&"is-center"],style:[e.style,e.isLast?{maxWidth:100/e.stepsCount+"%"}:{marginRight:-e.$parent.stepOffset+"px"}]},[i("div",{staticClass:"el-step__head",class:"is-"+e.currentStatus},[i("div",{staticClass:"el-step__line",style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[i("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),i("div",{staticClass:"el-step__icon",class:"is-"+(e.icon?"icon":"text")},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?i("i",{staticClass:"el-step__icon-inner",class:[e.icon]}):e._e(),e.icon||e.isSimple?e._e():i("div",{staticClass:"el-step__icon-inner"},[e._v(e._s(e.index+1))])]):i("i",{staticClass:"el-step__icon-inner is-status",class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),i("div",{staticClass:"el-step__main"},[i("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),e.isSimple?i("div",{staticClass:"el-step__arrow"}):i("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(387),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(388),s=i.n(n),a=i(389),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(33),s=function(e){return e&&e.__esModule?e:{default:e}}(n),a=i(24);t.default={name:"ElCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},computed:{hasLabel:function(){return this.items.some(function(e){return e.label.toString().length>0})}},watch:{items:function(e){e.length>0&&this.setActiveItem(this.initialIndex)},activeIndex:function(e,t){this.resetItemPosition(t),this.$emit("change",e,t)},autoplay:function(e){e?this.startTimer():this.pauseTimer()}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var i=this.items.length;return t===i-1&&e.inStage&&this.items[0].active||e.inStage&&this.items[t+1]&&this.items[t+1].active?"left":!!(0===t&&e.inStage&&this.items[i-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(e){var t=this;this.items.forEach(function(i,n){e===t.itemInStage(i,n)&&(i.hover=!0)})},handleButtonLeave:function(){this.items.forEach(function(e){e.hover=!1})},updateItems:function(){this.items=this.$children.filter(function(e){return"ElCarouselItem"===e.$options.name})},resetItemPosition:function(e){var t=this;this.items.forEach(function(i,n){i.translateItem(n,t.activeIndex,e)})},playSlides:function(){this.activeIndex0&&(e=this.items.indexOf(t[0]))}if(e=Number(e),!isNaN(e)&&e===Math.floor(e)){var i=this.items.length;this.activeIndex=e<0?i-1:e>=i?0:e}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(e){this.activeIndex=e},handleIndicatorHover:function(e){"hover"===this.trigger&&e!==this.activeIndex&&(this.activeIndex=e)}},created:function(){var e=this;this.throttledArrowClick=(0,s.default)(300,!0,function(t){e.setActiveItem(t)}),this.throttledIndicatorHover=(0,s.default)(300,function(t){e.handleIndicatorHover(t)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){(0,a.addResizeListener)(e.$el,e.resetItemPosition),e.initialIndex=0&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&(0,a.removeResizeListener)(this.$el,this.resetItemPosition)}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===e.type},on:{mouseenter:function(t){t.stopPropagation(),e.handleMouseEnter(t)},mouseleave:function(t){t.stopPropagation(),e.handleMouseLeave(t)}}},[i("div",{staticClass:"el-carousel__container",style:{height:e.height}},[i("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==e.arrow?i("button",{directives:[{name:"show",rawName:"v-show",value:"always"===e.arrow||e.hover,expression:"arrow === 'always' || hover"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",on:{mouseenter:function(t){e.handleButtonEnter("left")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex-1)}}},[i("i",{staticClass:"el-icon-arrow-left"})]):e._e()]),i("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==e.arrow?i("button",{directives:[{name:"show",rawName:"v-show",value:"always"===e.arrow||e.hover,expression:"arrow === 'always' || hover"}],staticClass:"el-carousel__arrow el-carousel__arrow--right",on:{mouseenter:function(t){e.handleButtonEnter("right")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex+1)}}},[i("i",{staticClass:"el-icon-arrow-right"})]):e._e()]),e._t("default")],2),"none"!==e.indicatorPosition?i("ul",{staticClass:"el-carousel__indicators",class:{"el-carousel__indicators--labels":e.hasLabel,"el-carousel__indicators--outside":"outside"===e.indicatorPosition||"card"===e.type}},e._l(e.items,function(t,n){return i("li",{staticClass:"el-carousel__indicator",class:{"is-active":n===e.activeIndex},on:{mouseenter:function(t){e.throttledIndicatorHover(n)},click:function(t){t.stopPropagation(),e.handleIndicatorClick(n)}}},[i("button",{staticClass:"el-carousel__button"},[e.hasLabel?i("span",[e._v(e._s(t.label))]):e._e()])])})):e._e()])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(391),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(392),s=i.n(n),a=i(393),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;t.default={name:"ElCarouselItem",props:{name:String,label:{type:[String,Number],default:""}},data:function(){return{hover:!1,translate:0,scale:1,active:!1,ready:!1,inStage:!1,animating:!1}},methods:{processIndex:function(e,t,i){return 0===t&&e===i-1?-1:t===i-1&&0===e?i:e=i/2?i+1:e>t+1&&e-t>=i/2?-2:e},calculateTranslate:function(e,t,i){return this.inStage?i*(1.17*(e-t)+1)/4:e2&&(e=this.processIndex(e,t,s)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,n),this.scale=this.active?1:.83):(this.active=e===t,this.translate=n*(e-t)),this.ready=!0},handleItemClick:function(){var e=this.$parent;if(e&&"card"===e.type){var t=e.items.indexOf(this);e.setActiveItem(t)}}},created:function(){this.$parent&&this.$parent.updateItems()},destroyed:function(){this.$parent&&this.$parent.updateItems()}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.ready,expression:"ready"}],staticClass:"el-carousel__item",class:{"is-active":e.active,"el-carousel__item--card":"card"===e.$parent.type,"is-in-stage":e.inStage,"is-hover":e.hover,"is-animating":e.animating},style:{msTransform:"translateX("+e.translate+"px) scale("+e.scale+")",webkitTransform:"translateX("+e.translate+"px) scale("+e.scale+")",transform:"translateX("+e.translate+"px) scale("+e.scale+")"},on:{click:e.handleItemClick}},["card"===e.$parent.type?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(395),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(396),s=i.n(n),a=i(397),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},watch:{value:function(e){this.activeNames=[].concat(e)}},methods:{setActiveNames:function(e){e=[].concat(e);var t=this.accordion?e[0]:e;this.activeNames=e,this.$emit("input",t),this.$emit("change",t)},handleItemClick:function(e){if(this.accordion)this.setActiveNames(!this.activeNames[0]&&0!==this.activeNames[0]||this.activeNames[0]!==e.name?e.name:"");else{var t=this.activeNames.slice(0),i=t.indexOf(e.name);i>-1?t.splice(i,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"el-collapse",attrs:{role:"tablist","aria-multiselectable":"true"}},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(399),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(400),s=i.n(n),a=i(401),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(29),a=n(s),r=i(1),o=n(r),l=i(9);t.default={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[o.default],components:{ElCollapseTransition:a.default},data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0,focusing:!1}},props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return this.$parent.activeNames.indexOf(this.name)>-1},id:function(){return(0,l.generateId)()}},watch:{isActive:function(e){}},methods:{handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this),this.focusing=!1},handleEnterClick:function(){this.dispatch("ElCollapse","item-click",this)}},mounted:function(){}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-collapse-item",class:{"is-active":e.isActive}},[i("div",{attrs:{role:"tab","aria-expanded":e.isActive,"aria-controls":"el-collapse-content-"+e.id,"aria-describedby":"el-collapse-content-"+e.id}},[i("div",{staticClass:"el-collapse-item__header",class:{focusing:e.focusing},attrs:{role:"button",id:"el-collapse-head-"+e.id,tabindex:"0"},on:{click:e.handleHeaderClick,keyup:function(t){if(!("button"in t)&&e._k(t.keyCode,"space",32,t.key)&&e._k(t.keyCode,"enter",13,t.key))return null;t.stopPropagation(),e.handleEnterClick(t)},focus:function(t){e.focusing=!0},blur:function(t){e.focusing=!1}}},[i("i",{staticClass:"el-collapse-item__arrow el-icon-arrow-right"}),e._t("title",[e._v(e._s(e.title))])],2)]),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap",attrs:{role:"tabpanel","aria-hidden":!e.isActive,"aria-labelledby":"el-collapse-head-"+e.id,id:"el-collapse-content-"+e.id}},[i("div",{staticClass:"el-collapse-item__content"},[e._t("default")],2)])])],1)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(403),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(404),s=i.n(n),a=i(408),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),a=n(s),r=i(405),o=n(r),l=i(7),u=n(l),c=i(10),d=n(c),h=i(16),f=n(h),p=i(1),m=n(p),v=i(5),g=n(v),y=i(12),b=i(13),_=n(b),C={props:{placement:{type:String,default:"bottom-start"},appendToBody:d.default.props.appendToBody,offset:d.default.props.offset,boundariesPadding:d.default.props.boundariesPadding,popperOptions:d.default.props.popperOptions},methods:d.default.methods,data:d.default.data,beforeDestroy:d.default.beforeDestroy};t.default={name:"ElCascader",directives:{Clickoutside:f.default},mixins:[C,m.default,g.default],inject:{elFormItem:{default:""}},components:{ElInput:u.default},props:{options:{type:Array,required:!0},props:{type:Object,default:function(){return{children:"children",label:"label",value:"value",disabled:"disabled"}}},value:{type:Array,default:function(){return[]}},placeholder:{type:String,default:function(){return(0,y.t)("el.cascader.placeholder")}},disabled:Boolean,clearable:{type:Boolean,default:!1},changeOnSelect:Boolean,popperClass:String,expandTrigger:{type:String,default:"click"},filterable:Boolean,size:String,showAllLevels:{type:Boolean,default:!0},debounce:{type:Number,default:300},beforeFilter:{type:Function,default:function(){return function(){}}}},data:function(){return{currentValue:this.value||[],menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},currentLabels:function(){var e=this,t=this.options,i=[];return this.currentValue.forEach(function(n){var s=t&&t.filter(function(t){return t[e.valueKey]===n})[0];s&&(i.push(s[e.labelKey]),t=s[e.childrenKey])}),i},_elFormItemSize:function(){return(this.elFormItem||{}).elFormItemSize},cascaderSize:function(){return this.size||this._elFormItemSize||(this.$ELEMENT||{}).size}},watch:{menuVisible:function(e){e?this.showMenu():this.hideMenu()},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},options:{deep:!0,handler:function(e){this.menu||this.initMenu(),this.flatOptions=this.flattenOptions(this.options),this.menu.options=e}}},methods:{initMenu:function(){this.menu=new a.default(o.default).$mount(),this.menu.options=this.options,this.menu.props=this.props,this.menu.expandTrigger=this.expandTrigger,this.menu.changeOnSelect=this.changeOnSelect,this.menu.popperClass=this.popperClass,this.popperElm=this.menu.$el,this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy)},showMenu:function(){var e=this;this.menu||this.initMenu(),this.menu.value=this.currentValue.slice(0),this.menu.visible=!0,this.menu.options=this.options,this.$nextTick(function(t){e.updatePopper(),e.menu.inputWidth=e.$refs.input.$el.offsetWidth-2})},hideMenu:function(){this.inputValue="",this.menu.visible=!1},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handlePick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.currentValue=e,this.$emit("input",e),this.$emit("change",e),t?this.menuVisible=!1:this.$nextTick(this.updatePopper)},handleInputChange:function(e){var t=this;if(this.menuVisible){var i=this.flatOptions;if(!e)return this.menu.options=this.options,void this.$nextTick(this.updatePopper);var n=i.filter(function(i){return i.some(function(i){return new RegExp(e,"i").test(i[t.labelKey])})});n=n.length>0?n.map(function(i){return{__IS__FLAT__OPTIONS:!0,value:i.map(function(e){return e[t.valueKey]}),label:t.renderFilteredOptionLabel(e,i)}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=n,this.$nextTick(this.updatePopper)}},renderFilteredOptionLabel:function(e,t){var i=this;return t.map(function(t,n){var s=t[i.labelKey],a=s.toLowerCase().indexOf(e.toLowerCase()),r=s.slice(a,e.length+a),o=a>-1?i.highlightKeyword(s,r):s;return 0===n?o:[" / ",o]})},highlightKeyword:function(e,t){var i=this,n=this._c;return e.split(t).map(function(e,s){return 0===s?e:[n("span",{class:{"el-cascader-menu__item__keyword":!0}},[i._v(t)]),e]})},flattenOptions:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=[];return e.forEach(function(e){var s=i.concat(e);e[t.childrenKey]?(t.changeOnSelect&&n.push(s),n=n.concat(t.flattenOptions(e[t.childrenKey],s))):n.push(s)}),n},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){this.menuVisible=!1},handleClick:function(){if(!this.disabled)return this.filterable?(this.menuVisible=!0,void this.$refs.input.focus()):void(this.menuVisible=!this.menuVisible)}},created:function(){var e=this;this.debouncedInputChange=(0,_.default)(this.debounce,function(t){var i=e.beforeFilter(t);i&&i.then?(e.menu.options=[{__IS__FLAT__OPTIONS:!0,label:e.t("el.cascader.loading"),value:"",disabled:!0}],i.then(function(){e.$nextTick(function(){e.handleInputChange(t)})})):!1!==i&&e.$nextTick(function(){e.handleInputChange(t)})})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(406),s=i.n(n),a=i(0),r=a(s.a,null,!1,null,null,null);t.default=r.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(63),a=n(s),r=i(407),o=i(35),l=n(o),u=function e(t,i){if(!t||!Array.isArray(t)||!i)return t;var n=[],s=["__IS__FLAT__OPTIONS","label","value","disabled"],a=i.children||"children";return t.forEach(function(t){var r={};s.forEach(function(e){var n=i[e],s=t[n];void 0===s&&(n=e,s=t[n]),void 0!==s&&(r[n]=s)}),Array.isArray(t[a])&&(r[a]=e(t[a],i)),n.push(r)}),n};t.default={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:""}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{cache:!1,get:function(){var e=this,t=this.activeValue,i=["label","value","children","disabled"],n=u(this.options,this.props);return function t(n){n.forEach(function(n){n.__IS__FLAT__OPTIONS||(i.forEach(function(t){var i=n[e.props[t]||t];void 0!==i&&(n[t]=i)}),Array.isArray(n.children)&&t(n.children))})}(n),function e(i){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],s=n.length;n[s]=i;var a=t[s];return(0,r.isDef)(a)&&(i=i.filter(function(e){return e.value===a})[0])&&i.children&&e(i.children,n),n}(n)}}},methods:{select:function(e,t){e.__IS__FLAT__OPTIONS?this.activeValue=e.value:t?this.activeValue.splice(t,this.activeValue.length-1,e.value):this.activeValue=[e.value],this.$emit("pick",this.activeValue.slice())},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var i=this.activeOptions.length;this.activeValue.splice(t,i,e.value),this.activeOptions.splice(t+1,i,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue.slice(),!1):this.$emit("activeItemChange",this.activeValue)},scrollMenu:function(e){(0,l.default)(e,e.getElementsByClassName("is-active")[0])},handleMenuEnter:function(){var e=this;this.$nextTick(function(){return e.$refs.menus.forEach(function(t){return e.scrollMenu(t)})})}},render:function(e){var t=this,i=this.activeValue,n=this.activeOptions,s=this.visible,r=this.expandTrigger,o=this.popperClass,l=this._l(n,function(n,s){var o=!1,l=t._l(n,function(n){var l={on:{}};if(n.__IS__FLAT__OPTIONS&&(o=!0),!n.disabled)if(n.children){var u={click:"click",hover:"mouseenter"}[r];l.on[u]=function(){t.activeItem(n,s),t.$nextTick(function(){t.scrollMenu(t.$refs.menus[s]),t.scrollMenu(t.$refs.menus[s+1])})}}else l.on.click=function(){t.select(n,s),t.$nextTick(function(){return t.scrollMenu(t.$refs.menus[s])})};return e("li",(0,a.default)([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":n.children,"is-active":n.value===i[s],"is-disabled":n.disabled}},l]),[n.label])}),u={};return o&&(u.minWidth=t.inputWidth+"px"),e("ul",{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":o},style:u,refInFor:!0,ref:"menus"},[l])});return e("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":this.handleMenuEnter,"after-leave":this.handleMenuLeave}},[e("div",{directives:[{name:"show",value:s}],class:["el-cascader-menus el-popper",o],ref:"wrapper"},[e("div",{attrs:{"x-arrow":!0},class:"popper__arrow"},[]),l])])}}},function(e,t,i){"use strict";function n(e){return void 0!==e&&null!==e}t.__esModule=!0,t.isDef=n},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClickoutside,expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[{"is-opened":e.menuVisible,"is-disabled":e.disabled},e.cascaderSize?"el-cascader--"+e.cascaderSize:""],on:{click:e.handleClick,mouseenter:function(t){e.inputHover=!0},mouseleave:function(t){e.inputHover=!1}}},[i("el-input",{ref:"input",attrs:{readonly:!e.filterable,placeholder:e.currentLabels.length?void 0:e.placeholder,"validate-event":!1,size:e.size,disabled:e.disabled},on:{input:e.debouncedInputChange},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}},[i("template",{attrs:{slot:"suffix"},slot:"suffix"},[e.clearable&&e.inputHover&&e.currentLabels.length?i("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:e.clearValue}}):i("i",{key:"2",staticClass:"el-input__icon el-icon-arrow-down",class:{"is-reverse":e.menuVisible}})])],2),i("span",{directives:[{name:"show",rawName:"v-show",value:""===e.inputValue,expression:"inputValue === ''"}],staticClass:"el-cascader__label"},[e.showAllLevels?[e._l(e.currentLabels,function(t,n){return[e._v("\n "+e._s(t)+"\n "),n2?parseFloat(e):parseInt(e,10)});if(4===n.length&&(this._alpha=Math.floor(100*parseFloat(n[3]))),n.length>=3){var s=f(n[0],n[1],n[2]);i(s.h,s.s,s.v)}}else if(-1!==e.indexOf("hsv")){var a=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});4===a.length&&(this._alpha=Math.floor(100*parseFloat(a[3]))),a.length>=3&&i(a[0],a[1],a[2])}else if(-1!==e.indexOf("rgb")){var r=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});if(4===r.length&&(this._alpha=Math.floor(100*parseFloat(r[3]))),r.length>=3){var o=p(r[0],r[1],r[2]),l=o.h,u=o.s,c=o.v;i(l,u,c)}}else if(-1!==e.indexOf("#")){var d=e.replace("#","").trim(),m=void 0,v=void 0,g=void 0;3===d.length?(m=h(d[0]+d[0]),v=h(d[1]+d[1]),g=h(d[2]+d[2])):6===d.length&&(m=h(d.substring(0,2)),v=h(d.substring(2,4)),g=h(d.substring(4)));var y=p(m,v,g),b=y.h,_=y.s,C=y.v;i(b,_,C)}},e.prototype.doOnChange=function(){var e=this._hue,t=this._saturation,i=this._value,n=this._alpha,s=this.format;if(this.enableAlpha)switch(s){case"hsl":var r=a(e,t/100,i/100);this.value="hsla("+e+", "+Math.round(100*r[1])+"%, "+Math.round(100*r[2])+"%, "+n/100+")";break;case"hsv":this.value="hsva("+e+", "+Math.round(t)+"%, "+Math.round(i)+"%, "+n/100+")";break;default:var o=m(e,t,i),l=o.r,u=o.g,d=o.b;this.value="rgba("+l+", "+u+", "+d+", "+n/100+")"}else switch(s){case"hsl":var h=a(e,t/100,i/100);this.value="hsl("+e+", "+Math.round(100*h[1])+"%, "+Math.round(100*h[2])+"%)";break;case"hsv":this.value="hsv("+e+", "+Math.round(t)+"%, "+Math.round(i)+"%)";break;case"rgb":var f=m(e,t,i),p=f.r,v=f.g,g=f.b;this.value="rgb("+p+", "+v+", "+g+")";break;default:this.value=c(m(e,t,i))}},e}();t.default=v},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(414),s=i.n(n),a=i(424),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(415),a=n(s),r=i(418),o=n(r),l=i(421),u=n(l),c=i(10),d=n(c),h=i(5),f=n(h),p=i(7),m=n(p);t.default={name:"el-color-picker-dropdown",mixins:[d.default,f.default],components:{SvPanel:a.default,HueSlider:o.default,AlphaSlider:u.default,ElInput:m.default},props:{color:{required:!0},showAlpha:Boolean},data:function(){return{customInput:""}},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")},handleConfirm:function(){(this.showAlpha?this.validRGBA(this.customInput):this.validRGBHex(this.customInput))?this.color.fromString(this.customInput):this.customInput=this.currentColor},validRGBHex:function(e){return/^#[A-Fa-f0-9]{6}$/.test(e)},validRGBA:function(e){var t=e.match(/^rgba\((\d+), ?(\d+), ?(\d+), ?([.0-9]+)\)$/);if(!t)return!1;var i=t.map(function(e){return parseInt(e,10)}).slice(1);if(i.some(function(e){return isNaN(e)}))return!1;var n=i[0],s=i[1],a=i[2],r=i[3];return!([n,s,a].some(function(e){return e<0||e>255})||r<0||r>1)}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var t=this;!0===e&&this.$nextTick(function(){var e=t.$refs,i=e.sl,n=e.hue,s=e.alpha;i&&i.update(),n&&n.update(),s&&s.update()})},currentColor:function(e){this.customInput=e}}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(416),s=i.n(n),a=i(417),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(44),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"el-sl-panel",props:{color:{required:!0}},computed:{colorValue:function(){return{hue:this.color.get("hue"),value:this.color.get("value")}}},watch:{colorValue:function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.getBoundingClientRect(),s=n.width,a=n.height;a||(a=3*s/4),this.cursorLeft=e*s/100,this.cursorTop=(100-t)*a/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el,i=t.getBoundingClientRect(),n=e.clientX-i.left,s=e.clientY-i.top;n=Math.max(0,n),n=Math.min(n,i.width),s=Math.max(0,s),s=Math.min(s,i.height),this.cursorLeft=n,this.cursorTop=s,this.color.set({saturation:n/i.width*100,value:100-s/i.height*100})}},mounted:function(){var e=this;(0,s.default)(this.$el,{drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-svpanel",style:{backgroundColor:e.background}},[i("div",{staticClass:"el-color-svpanel__white"}),i("div",{staticClass:"el-color-svpanel__black"}),i("div",{staticClass:"el-color-svpanel__cursor",style:{top:e.cursorTop+"px",left:e.cursorLeft+"px"}},[i("div")])])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(419),s=i.n(n),a=i(420),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(44),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},computed:{hueValue:function(){return this.color.get("hue")}},watch:{hueValue:function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var s=e.clientY-t.top;s=Math.min(s,t.height-i.offsetHeight/2),s=Math.max(i.offsetHeight/2,s),n=Math.round((s-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var a=e.clientX-t.left;a=Math.min(a,t.width-i.offsetWidth/2),a=Math.max(i.offsetWidth/2,a),n=Math.round((a-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var e=this,t=this.$refs,i=t.bar,n=t.thumb,a={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};(0,s.default)(i,a),(0,s.default)(n,a),this.update()}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":e.vertical}},[i("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:e.handleClick}}),i("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:e.thumbLeft+"px",top:e.thumbTop+"px"}})])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(422),s=i.n(n),a=i(423),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(44),s=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb;e.target!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var s=e.clientX-t.left;s=Math.max(i.offsetWidth/2,s),s=Math.min(s,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((s-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var e=this,t=this.$refs,i=t.bar,n=t.thumb,a={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};(0,s.default)(i,a),(0,s.default)(n,a),this.update()}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":e.vertical}},[i("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:e.background},on:{click:e.handleClick}}),i("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:e.thumbLeft+"px",top:e.thumbTop+"px"}})])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:e.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:e.color}})],1),e.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:e.color}}):e._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[i("el-input",{attrs:{size:"mini"},on:{blur:e.handleConfirm},nativeOn:{keyup:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key))return null;e.handleConfirm(t)}},model:{value:e.customInput,callback:function(t){e.customInput=t},expression:"customInput"}})],1),i("el-button",{staticClass:"el-color-dropdown__link-btn",attrs:{size:"mini",type:"text"},on:{click:function(t){e.$emit("clear")}}},[e._v("\n "+e._s(e.t("el.colorpicker.clear"))+"\n ")]),i("el-button",{staticClass:"el-color-dropdown__btn",attrs:{plain:"",size:"mini"},on:{click:e.confirmValue}},[e._v("\n "+e._s(e.t("el.colorpicker.confirm"))+"\n ")])],1)],1)])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.hide,expression:"hide"}],class:["el-color-picker",e.disabled?"is-disabled":"",e.colorSize?"el-color-picker--"+e.colorSize:""]},[e.disabled?i("div",{staticClass:"el-color-picker__mask"}):e._e(),i("div",{staticClass:"el-color-picker__trigger",on:{click:e.handleTrigger}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":e.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:e.displayedColor}}),e.value||e.showPanelColor?e._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{directives:[{name:"show",rawName:"v-show",value:e.value||e.showPanelColor,expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),i("picker-dropdown",{ref:"dropdown",class:["el-color-picker__panel",e.popperClass||""],attrs:{color:e.color,"show-alpha":e.showAlpha},on:{pick:e.confirmValue,clear:e.clearValue},model:{value:e.showPicker,callback:function(t){e.showPicker=t},expression:"showPicker"}})],1)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(427),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(428),s=i.n(n),a=i(432),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(28),a=n(s),r=i(1),o=n(r),l=i(5),u=n(l),c=i(429),d=n(c);t.default={name:"ElTransfer",mixins:[o.default,u.default],components:{TransferPanel:d.default,ElButton:a.default},props:{data:{type:Array,default:function(){return[]}},titles:{type:Array,default:function(){return[]}},buttonTexts:{type:Array,default:function(){return[]}},filterPlaceholder:{type:String,default:""},filterMethod:Function,leftDefaultChecked:{type:Array,default:function(){return[]}},rightDefaultChecked:{type:Array,default:function(){return[]}},renderContent:Function,value:{type:Array,default:function(){return[]}},format:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{sourceData:function(){var e=this;return this.data.filter(function(t){return-1===e.value.indexOf(t[e.props.key])})},targetData:function(){var e=this;return this.data.filter(function(t){return e.value.indexOf(t[e.props.key])>-1})},hasButtonTexts:function(){return 2===this.buttonTexts.length}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{onSourceCheckedChange:function(e){this.leftChecked=e},onTargetCheckedChange:function(e){this.rightChecked=e},addToLeft:function(){var e=this.value.slice();this.rightChecked.forEach(function(t){var i=e.indexOf(t);i>-1&&e.splice(i,1)}),this.$emit("input",e),this.$emit("change",e,"left",this.rightChecked)},addToRight:function(){var e=this,t=this.value.slice();this.leftChecked.forEach(function(i){-1===e.value.indexOf(i)&&(t=t.concat(i))}),this.$emit("input",t),this.$emit("change",t,"right",this.leftChecked)}}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(430),s=i.n(n),a=i(431),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(37),a=n(s),r=i(14),o=n(r),l=i(7),u=n(l),c=i(5),d=n(c);t.default={mixins:[d.default],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:a.default,ElCheckbox:o.default,ElInput:u.default,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t}(this);return t.renderContent?t.renderContent(e,this.option):e("span",null,[this.option[t.labelProp]||this.option[t.keyProp]])}}},props:{data:{type:Array,default:function(){return[]}},renderContent:Function,placeholder:String,title:String,filterable:Boolean,format:Object,filterMethod:Function,defaultChecked:Array,props:Object},data:function(){return{checked:[],allChecked:!1,query:"",inputHover:!1}},watch:{checked:function(e){this.updateAllChecked(),this.$emit("checked-change",e)},data:function(){var e=this,t=[],i=this.filteredData.map(function(t){return t[e.keyProp]});this.checked.forEach(function(e){i.indexOf(e)>-1&&t.push(e)}),this.checked=t},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var i=this;if(!t||e.length!==t.length||!e.every(function(e){return t.indexOf(e)>-1})){var n=[],s=this.checkableData.map(function(e){return e[i.keyProp]});e.forEach(function(e){s.indexOf(e)>-1&&n.push(e)}),this.checked=n}}}},computed:{filteredData:function(){var e=this;return this.data.filter(function(t){return"function"==typeof e.filterMethod?e.filterMethod(e.query,t):(t[e.labelProp]||t[e.keyProp].toString()).toLowerCase().indexOf(e.query.toLowerCase())>-1})},checkableData:function(){var e=this;return this.filteredData.filter(function(t){return!t[e.disabledProp]})},checkedSummary:function(){var e=this.checked.length,t=this.data.length,i=this.format,n=i.noChecked,s=i.hasChecked;return n&&s?e>0?s.replace(/\${checked}/g,e).replace(/\${total}/g,t):n.replace(/\${total}/g,t):e+"/"+t},isIndeterminate:function(){var e=this.checked.length;return e>0&&e0&&0===this.filteredData.length},inputIcon:function(){return this.query.length>0&&this.inputHover?"circle-close":"search"},labelProp:function(){return this.props.label||"label"},keyProp:function(){return this.props.key||"key"},disabledProp:function(){return this.props.disabled||"disabled"},hasFooter:function(){return!!this.$slots.default}},methods:{updateAllChecked:function(){var e=this,t=this.checkableData.map(function(t){return t[e.keyProp]});this.allChecked=t.length>0&&t.every(function(t){return e.checked.indexOf(t)>-1})},handleAllCheckedChange:function(e){var t=this;this.checked=e?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-transfer-panel"},[i("p",{staticClass:"el-transfer-panel__header"},[i("el-checkbox",{attrs:{indeterminate:e.isIndeterminate},on:{change:e.handleAllCheckedChange},model:{value:e.allChecked,callback:function(t){e.allChecked=t},expression:"allChecked"}},[e._v("\n "+e._s(e.title)+"\n "),i("span",[e._v(e._s(e.checkedSummary))])])],1),i("div",{class:["el-transfer-panel__body",e.hasFooter?"is-with-footer":""]},[e.filterable?i("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:e.placeholder},nativeOn:{mouseenter:function(t){e.inputHover=!0},mouseleave:function(t){e.inputHover=!1}},model:{value:e.query,callback:function(t){e.query=t},expression:"query"}},[i("i",{class:["el-input__icon","el-icon-"+e.inputIcon],attrs:{slot:"prefix"},on:{click:e.clearQuery},slot:"prefix"})]):e._e(),i("el-checkbox-group",{directives:[{name:"show",rawName:"v-show",value:!e.hasNoMatch&&e.data.length>0,expression:"!hasNoMatch && data.length > 0"}],staticClass:"el-transfer-panel__list",class:{"is-filterable":e.filterable},model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},e._l(e.filteredData,function(t){return i("el-checkbox",{key:t[e.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:t[e.keyProp],disabled:t[e.disabledProp]}},[i("option-content",{attrs:{option:t}})],1)})),i("p",{directives:[{name:"show",rawName:"v-show",value:e.hasNoMatch,expression:"hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[e._v(e._s(e.t("el.transfer.noMatch")))]),i("p",{directives:[{name:"show",rawName:"v-show",value:0===e.data.length&&!e.hasNoMatch,expression:"data.length === 0 && !hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[e._v(e._s(e.t("el.transfer.noData")))])],1),e.hasFooter?i("p",{staticClass:"el-transfer-panel__footer"},[e._t("default")],2):e._e()])},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-transfer"},[i("transfer-panel",e._b({attrs:{data:e.sourceData,title:e.titles[0]||e.t("el.transfer.titles.0"),"default-checked":e.leftDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder")},on:{"checked-change":e.onSourceCheckedChange}},"transfer-panel",e.$props,!1),[e._t("left-footer")],2),i("div",{staticClass:"el-transfer__buttons"},[i("el-button",{class:["el-transfer__button",e.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===e.rightChecked.length},nativeOn:{click:function(t){e.addToLeft(t)}}},[i("i",{staticClass:"el-icon-arrow-left"}),void 0!==e.buttonTexts[0]?i("span",[e._v(e._s(e.buttonTexts[0]))]):e._e()]),i("el-button",{class:["el-transfer__button",e.hasButtonTexts?"is-with-texts":""],attrs:{type:"primary",disabled:0===e.leftChecked.length},nativeOn:{click:function(t){e.addToRight(t)}}},[void 0!==e.buttonTexts[1]?i("span",[e._v(e._s(e.buttonTexts[1]))]):e._e(),i("i",{staticClass:"el-icon-arrow-right"})])],1),i("transfer-panel",e._b({attrs:{data:e.targetData,title:e.titles[1]||e.t("el.transfer.titles.1"),"default-checked":e.rightDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder")},on:{"checked-change":e.onTargetCheckedChange}},"transfer-panel",e.$props,!1),[e._t("right-footer")],2)],1)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(434),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(435),s=i.n(n),a=i(436),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElContainer",componentName:"ElContainer",props:{direction:String},computed:{isVertical:function(){return"vertical"===this.direction||"horizontal"!==this.direction&&(!(!this.$slots||!this.$slots.default)&&this.$slots.default.some(function(e){var t=e.componentOptions&&e.componentOptions.tag;return"el-header"===t||"el-footer"===t}))}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("section",{staticClass:"el-container",class:{"is-vertical":e.isVertical}},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(438),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(439),s=i.n(n),a=i(440),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElHeader",componentName:"ElHeader",props:{height:{type:String,default:"60px"}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("header",{staticClass:"el-header",style:{height:e.height}},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(442),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(443),s=i.n(n),a=i(444),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElAside",componentName:"ElAside",props:{width:{type:String,default:"300px"}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("aside",{staticClass:"el-aside",style:{width:e.width}},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(446),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(447),s=i.n(n),a=i(448),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElMain",componentName:"ElMain"}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("main",{staticClass:"el-main"},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},function(e,t,i){"use strict";t.__esModule=!0;var n=i(450),s=function(e){return e&&e.__esModule?e:{default:e}}(n);s.default.install=function(e){e.component(s.default.name,s.default)},t.default=s.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(451),s=i.n(n),a=i(452),r=i(0),o=r(s.a,a.a,!1,null,null,null);t.default=o.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={name:"ElFooter",componentName:"ElFooter",props:{height:{type:String,default:"60px"}}}},function(e,t,i){"use strict";var n=function(){var e=this,t=e.$createElement;return(e._self._c||t)("footer",{staticClass:"el-footer",style:{height:e.height}},[e._t("default")],2)},s=[],a={render:n,staticRenderFns:s};t.a=a},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){e.exports=i(21)}],[516]); \ No newline at end of file diff --git a/2.0/en-US.9a7fc56.js b/2.0/en-US.9a7fc56.js new file mode 100644 index 000000000..faf229ee0 --- /dev/null +++ b/2.0/en-US.9a7fc56.js @@ -0,0 +1 @@ +webpackJsonp([1],Array(519).concat([function(s,t,a){function e(s){return a(l(s))}function l(s){var t=n[s];if(!(t+1))throw new Error("Cannot find module '"+s+"'.");return t}var n={"./changelog.vue":575,"./component.vue":583,"./design.vue":588,"./guide.vue":592,"./index.vue":597,"./nav.vue":602,"./resource.vue":607};e.keys=function(){return Object.keys(n)},e.resolve=l,s.exports=e,e.id=519},,function(s,t,a){function e(s){return a(l(s))}function l(s){var t=n[s];if(!(t+1))throw new Error("Cannot find module '"+s+"'.");return t}var n={"./en-US/alert.md":878,"./en-US/badge.md":884,"./en-US/breadcrumb.md":889,"./en-US/button.md":892,"./en-US/card.md":897,"./en-US/carousel.md":903,"./en-US/cascader.md":909,"./en-US/checkbox.md":915,"./en-US/collapse.md":919,"./en-US/color-picker.md":925,"./en-US/color.md":931,"./en-US/container.md":936,"./en-US/custom-theme.md":942,"./en-US/date-picker.md":945,"./en-US/datetime-picker.md":951,"./en-US/dialog.md":957,"./en-US/dropdown.md":963,"./en-US/form.md":969,"./en-US/i18n.md":975,"./en-US/icon.md":978,"./en-US/input-number.md":984,"./en-US/input.md":990,"./en-US/installation.md":996,"./en-US/layout.md":999,"./en-US/loading.md":1004,"./en-US/menu.md":1010,"./en-US/message-box.md":1016,"./en-US/message.md":1020,"./en-US/notification.md":1024,"./en-US/pagination.md":1028,"./en-US/popover.md":1034,"./en-US/progress.md":1040,"./en-US/quickstart.md":1043,"./en-US/radio.md":1046,"./en-US/rate.md":1050,"./en-US/select.md":1056,"./en-US/slider.md":1062,"./en-US/steps.md":1066,"./en-US/switch.md":1070,"./en-US/table.md":1076,"./en-US/tabs.md":1082,"./en-US/tag.md":1086,"./en-US/time-picker.md":1092,"./en-US/tooltip.md":1098,"./en-US/transfer.md":1104,"./en-US/transition.md":1110,"./en-US/tree.md":1116,"./en-US/typography.md":1122,"./en-US/upload.md":1127};e.keys=function(){return Object.keys(n)},e.resolve=l,s.exports=e,e.id=521},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){s.exports=a(527)},function(s,t,a){!function(t,a){s.exports=a()}(0,function(){return function(s){function t(e){if(a[e])return a[e].exports;var l=a[e]={exports:{},id:e,loaded:!1};return s[e].call(l.exports,l,l.exports,t),l.loaded=!0,l.exports}var a={};return t.m=s,t.c=a,t.p="",t(0)}([function(s,t,a){"use strict";function e(s){return s&&s.__esModule?s:{default:s}}function l(s){if(Array.isArray(s)){for(var t=0,a=Array(s.length);t1&&"\\"!==e[0].charAt(e[0].length-1)&&(l=e.shift(),s({name:"erase",actor:l}));var n=e.join(":").replace(/\\:/g,":"),r={name:"type",args:[n]};null!=l&&(r.actor=l),s(r)}p.default.isFunction(a)&&s({name:"callback",args:[a]}),p.default.isNumber(a)&&s(a>0?{name:"wait",args:[a]}:{name:"erase",args:[a]}),p.default.isObject(a)&&(p.default.isArray(a.args)||(a.args=[]),a.args.unshift(function(){w(a.name+":end",a),o()}),t.push(a))}for(var t=[],a=arguments.length,e=Array(a),l=0;l=S.scenario.length)return S.status="ready",w("scenario:end"),this;var s=S.scenario[++S.currentScene];if(0===S.currentScene&&w("scenario:start"),"publisher"===s.name){var a=n(s.args),e=a[0];return w.apply(void 0,l(a.slice(1))),e()}switch(s.actor&&t(s.actor),w(s.name+":start",s),s.name){case"type":h.apply(void 0,l(s.args));break;case"erase":u.apply(void 0,l(s.args));break;case"callback":b.apply(void 0,l(s.args));break;case"wait":f.apply(void 0,l(s.args));break;default:console.debug("No scene handler for "+s.name)}return this}function h(s,t){var e=a(),l=S.options.locale,n=S.options.minSpeed.type,r=S.options.maxSpeed.type,v=e.displayValue,_=-1,c=!1,i=null,o=null,p=m.default.map(t);return t=m.default.strip(t),function a(){var h=m.default.strip(e.displayValue.substr(v.length));if(h===t)return s();var u=t.substr(0,_+1),j=h!==u,g=e.shouldBeMistaken(h,t,i,o),b=c||!g;if(j&&b)c=!0,i=null,e.displayValue=v+m.default.inject(h.substr(0,h.length-1),p),_--,o=_;else{c=!1;var f=t.charAt(++_);g&&(f=d.default.randomCharNear(f,l),null==i&&(i=_)),e.displayValue=v+m.default.inject(h+f,p)}return setTimeout(a,e.getTypingSpeed(n,r))}(),this}function u(s,t){var e=a();if(null==e)return s();if(!0!==k.erase)return e.displayValue="",s();var l=S.options.minSpeed.erase,n=S.options.maxSpeed.erase,r=e.displayValue,v=m.default.map(r);r=m.default.strip(r);var _=r.length,c=void 0,i=0;return p.default.isNumber(t)&&(t>0?c=t:i=r.length+t),function t(){return _===i?s():(e.displayValue=m.default.inject(r.substr(0,--_),v),setTimeout(t,c||e.getTypingSpeed(l,n)))}(),this}function b(s,t){return t.call(this,s),this}function f(s,t){return setTimeout(s.bind(this),t),this}function y(s,t){return s.split(",").forEach(function(s){s=s.trim(),p.default.isArray(S.events[s])||(S.events[s]=[]),S.events[s].push(t)}),this}function w(){for(var s=arguments.length,t=Array(s),a=0;a0&&l.concat(S.events["*"]||[]).forEach(function(s){return s.apply(void 0,t)}),this}var k=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(k=i.default.merge({},g,k),p.default.isNumber(k.minSpeed)){var x=k,C=x.minSpeed;k.minSpeed={erase:C,type:C}}if(p.default.isNumber(k.maxSpeed)){var A=k,T=A.maxSpeed;k.maxSpeed={erase:T,type:T}}if("detect"===k.locale&&j){var E=j.languages;p.default.isArray(E)&&p.default.isString(E[0])&&(k.locale=E[0].substr(0,2))}d.default.supports(k.locale)||(k.locale=d.default.defaultLocale);var S={options:k,casting:{},status:"ready",onStage:null,currentScene:-1,scenario:[],events:{}};return t(null),Object.freeze(Object.defineProperties({addActor:s,getCurrentActor:a,addScene:e,play:r,replay:v,stop:c,on:y},{options:{get:function(){return S.options},configurable:!0,enumerable:!0},status:{get:function(){return S.status},configurable:!0,enumerable:!0}}))}Object.defineProperty(t,"__esModule",{value:!0});var v=a(1),_=e(v),c=a(3),i=e(c),o=a(2),p=e(o),h=a(4),d=e(h),u=a(6),m=e(u),j="undefined"!=typeof window&&window.navigator,g={autoplay:!0,erase:!0,minSpeed:{erase:80,type:80},maxSpeed:{erase:450,type:450},locale:"detect"};r.init=function(){var s=arguments.length<=0||void 0===arguments[0]?"actor":arguments[0],t=r();return t.addActor(s,{accuracy:1,speed:.8}),t},t.default=r,s.exports=t.default},function(s,t,a){"use strict";function e(s){return s&&s.__esModule?s:{default:s}}Object.defineProperty(t,"__esModule",{value:!0});var l=a(2),n=e(l),r=a(3),v=e(r),_="undefined"!=typeof window&&window.document,c={speed:.6,accuracy:.6};t.default=function(s){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],a=arguments.length<=2||void 0===arguments[2]?null:arguments[2],e="",l=void 0;if(n.default.isNumber(t)&&(t={speed:t,accuracy:t}),t=v.default.merge({},c,t),_&&(null==a&&(a="#"+s),n.default.isString(a))){var r=a,i=_.querySelector(r);if(null==i)throw new Error("no matches for "+s+"'s selector: "+r);l=i,a=function(s){l.innerHTML=s}}return n.default.isFunction(a)||(a=console.log.bind(console)),Object.defineProperties({$element:l,getTypingSpeed:function(s,a){var e=v.default.randomFloat(t.speed,1);return v.default.getPercentageOf(a,s,e)},shouldBeMistaken:function(s,a){var e=arguments.length<=2||void 0===arguments[2]?null:arguments[2],l=arguments.length<=3||void 0===arguments[3]?null:arguments[3],r=10*t.accuracy;if(r>=8)return!1;if(s.length<=r)return!1;if(s.length===a.length)return!1;if(n.default.isNumber(e)){var _=s.length-e;if(_>=(r>=6?10-r:4))return!1}if(n.default.isNumber(l)){var _=s.length-l;if(_<=2*Math.max(r,2))return!1}return v.default.randomFloat(0,.8)>t.accuracy}},{displayValue:{get:function(){return e},set:function(s){e=s,a(s)},configurable:!0,enumerable:!0},name:{get:function(){return s},configurable:!0,enumerable:!0}})},s.exports=t.default},function(s,t){"use strict";function a(s){return{}.toString.call(s)}Object.defineProperty(t,"__esModule",{value:!0}),t.default={isNumber:function(s){return"number"==typeof s},isString:function(s){return"[object String]"===a(s)},isObject:function(s){return"[object Object]"===a(s)},isArray:function(s){return"[object Array]"===a(s)},isFunction:function(s){return"function"==typeof s}},s.exports=t.default},function(s,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={merge:function(s){for(var t=[].slice.call(arguments,1),a=0,e=t.length;a0?e[v.default.random(0,e.length-1)]:this.randomChar(t);return l&&(i=i.toUpperCase()),i},randomChar:function(s){if(!this.supports(s))throw new Error('locale "'+s+'" is not supported');var t=c.default[s].list.join("");return t.charAt(v.default.random(0,t.length-1))}},s.exports=t.default},function(s,t){s.exports={en:["qwertyuiop","asdfghjkl","zxcvbnm"],fr:["azertyuiop","qsdfghjklm","wxcvbn"],da:["qwertyuiopå","asdfghjklæø","zxcvbnm"],de:["qwertzuiopü","asdfghjklöä","yxcvbnm"],pl:["qwertyuiopęó","asdfghjkląśł","zxcvbnmżźćń"],pt:["qwertyuiop","asdfghjklç","zxcvbnm"],ru:["йцукенгшщзх","фывапролджэ","ячсмитьбюъ"],es:["qwertyuiop","asdfghjklñ","zxcvbnm"]}},function(s,t,a){"use strict";function e(s){var t=s.match(/<([^\s>]+)/);return Boolean(t)&&n.default.indexOf(t[1].toLowerCase())>-1}Object.defineProperty(t,"__esModule",{value:!0});var l=a(7),n=function(s){return s&&s.__esModule?s:{default:s}}(l);t.default={strip:function(s){return s.replace(/(<([^>]+)>)/gi,"")},map:function(s){for(var t=/<[^>]+>/gi,a=[],l=[],n=void 0,r=void 0;n=t.exec(s);)r={tagName:n[0],position:n.index},"/"===r.tagName.charAt(1)?r.opener=l.pop():"/"===r.tagName.charAt(r.tagName.length-2)||e(r.tagName)||l.push(r),a.push(r);return a},inject:function(s,t){for(var a=0,e=void 0;a0&&e.position<=s.length?s=s.substr(0,e.position)+e.tagName+s.substr(e.position):e.opener&&e.opener.positionli{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 e=a(579),l=function(s){return s&&s.__esModule?s:{default:s}}(e);t.default={components:{ChangeLog:l.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 e=t[1].textContent.trim(),l='

  • '+e+"

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

  • '+e+"

    ")}l=l.replace(/#(\d+)/g,'#$1'),l=l.replace(/@(\w+)/g,'@$1'),this.$refs.timeline.innerHTML=l+"
    • ",s.$el.remove()}}},function(s,t,a){s.exports=a(580)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(581),l=a(0),n=l(null,e.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changelog")]),a("h3",{attrs:{id:"2-0-0-alpha-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-alpha-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.0-alpha.3")]),a("p",[a("em",[s._v("2017-10-16")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features")]),a("ul",[a("li",[s._v("General\n"),a("ul",[a("li",[s._v("Configure component sizes globally. Now when you import Element, you can add a global config object with a "),a("code",{pre:!0},[s._v("size")]),s._v(" prop to configure default sizes for all components. For fully import:")])]),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")])]),s._v("\nFor partial import:"),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")])]),s._v("\nWith the above config, the default size of all components that have "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute will be 'small'.")]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("Now you can customize spinner icon and background color with "),a("code",{pre:!0},[s._v("spinner")]),s._v(" and "),a("code",{pre:!0},[s._v("background")]),s._v(" prop, #7390")])])]),a("li",[s._v("Autocomplete\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("debounce")]),s._v(" attribute, #7413")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("limit")]),s._v(" and "),a("code",{pre:!0},[s._v("on-exceed")]),s._v(" attributes to limit the amount of files, #7405")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("open")]),s._v(" and "),a("code",{pre:!0},[s._v("close")]),s._v(" methods to open and close SubMenu programmatically, #7412")])])]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("value-format")]),s._v(" attribute to customize the format of the binding value, #7367")])])]),a("li",[s._v("TimePicker\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("arrow-control")]),s._v(" attribute to spin the time with arrows #7438")])])]),a("li",[s._v("DateTimePicker\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("time-arrow-control")]),s._v(" attribute to activate "),a("code",{pre:!0},[s._v("arrow-control")]),s._v(" of the nesting TimePicker, #7438")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("Form and Form-item now have a "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute. Inner components will inherit this size if not specified on themselves, #7428")]),a("li",[a("code",{pre:!0},[s._v("validate")]),s._v(" method will now return a promise if the callback is omitted, #7405")])])])]),a("h4",{attrs:{id:"fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes")]),a("ul",[a("li",[s._v("Fixed the console warning "),a("code",{pre:!0},[s._v('Injection "elFormItem" not found')]),s._v(" of some components")])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes")]),a("ul",[a("li",[s._v("The params of DatePicker's "),a("code",{pre:!0},[s._v("change")]),s._v(" event is now the binding value itself. Its format is controlled by "),a("code",{pre:!0},[s._v("value-format")])]),a("li",[s._v("Input's "),a("code",{pre:!0},[s._v("change")]),s._v(" event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use "),a("code",{pre:!0},[s._v("input")]),s._v(" event.")]),a("li",[s._v("Only compatible with Vue 2.5.2 and beyond")])]),a("h3",{attrs:{id:"2-0-0-alpha-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-alpha-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.0-alpha.2")]),a("p",[a("em",[s._v("2017-10-05")])]),a("ul",[a("li",[s._v("Updated the primary color of "),a("code",{pre:!0},[s._v("theme-chalk")]),s._v(", #7351")]),a("li",[s._v("Fixed console error when using Dropdown, #7322")]),a("li",[s._v("Fixed console error when using Menu, #7321")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("popper-class")]),s._v(" attribute for ColorPicker, #7351")]),a("li",[s._v("Now Button's "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute works correctly, #7352")])]),a("h3",{attrs:{id:"2-0-0-alpha-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-alpha-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.0-alpha.1")]),a("p",[a("em",[s._v("2017-09-30")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features")]),a("ul",[a("li",[s._v("General\n"),a("ul",[a("li",[s._v("A new theme: "),a("code",{pre:!0},[s._v("theme-chalk")])]),a("li",[s._v("Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),a("li",[s._v("Layout components: Container, Header, Aside, Main, Footer")])])]),a("li",[s._v("Button\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("round")]),s._v(" attribute. It's used for round-cornered Buttons #6643")])])]),a("li",[s._v("TimeSelect\n"),a("ul",[a("li",[s._v("Now can be navigated by "),a("code",{pre:!0},[s._v("Up")]),s._v(" and "),a("code",{pre:!0},[s._v("Down")]),s._v(", and hitting "),a("code",{pre:!0},[s._v("Enter")]),s._v(" selects the time #6023")])])]),a("li",[s._v("TimePicker\n"),a("ul",[a("li",[s._v("Now can be navigated by arrow keys, and hitting "),a("code",{pre:!0},[s._v("Enter")]),s._v(" selects the time #6050")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("start-placeholder")]),s._v(" and "),a("code",{pre:!0},[s._v("end-placeholder")]),s._v(". They're placeholders for the two input boxes in range mode #7169")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("Now child nodes don't render before the first expand #6257")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("check-descendants")]),s._v(" attribute. It determines if child nodes are checked when checking their parent node\nin "),a("code",{pre:!0},[s._v("lazy")]),s._v(" mode #6235")])])]),a("li",[s._v("Tag\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute #7203")])])]),a("li",[s._v("Datepicker\n"),a("ul",[a("li",[s._v("Now "),a("code",{pre:!0},[s._v("timeFormat")]),s._v(" can format the TimePicker when type is set to "),a("code",{pre:!0},[s._v("datetimerange")]),s._v(" #6052")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("start-placeholder")]),s._v(" and "),a("code",{pre:!0},[s._v("end-placeholder")]),s._v(". They're placeholders for the two input boxes in range mode #7169")])])]),a("li",[s._v("MessageBox\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("closeOnHashChange")]),s._v(" attribute #6043")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute so that the content can be centered #7029")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("roundButton")]),s._v(" attribute to display round Buttons #7029")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" attribute. When set to "),a("code",{pre:!0},[s._v("true")]),s._v(", "),a("code",{pre:!0},[s._v("message")]),s._v(" will be parsed as HTML string"),a("sup",[s._v("*")]),s._v(" #6043")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("width")]),s._v("、"),a("code",{pre:!0},[s._v("fullscreen")]),s._v("、"),a("code",{pre:!0},[s._v("append-to-body")]),s._v(" attributes. Now Dialog can be nested")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute so that the content can be centered #7042")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("focus-after-closed")]),s._v("、"),a("code",{pre:!0},[s._v("focus-after-open")]),s._v(" to improve accessibility #6511")])])]),a("li",[s._v("ColorPicker\n"),a("ul",[a("li",[s._v("Now you can type colors in the input box #6167")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("size")]),s._v(" and "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attributes #7026")])])]),a("li",[s._v("Message\n"),a("ul",[a("li",[s._v("Now color of the icons can be overridden by CSS #6207")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" attribute. When set to "),a("code",{pre:!0},[s._v("true")]),s._v(", "),a("code",{pre:!0},[s._v("message")]),s._v(" will be parsed as HTML string"),a("sup",[s._v("*")]),s._v(" #6207")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute so that the content can be centered #6875")])])]),a("li",[s._v("Notification\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("position")]),s._v(" attribute to configure where Notification pops up #6231")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" attribute. When set to "),a("code",{pre:!0},[s._v("true")]),s._v(", "),a("code",{pre:!0},[s._v("message")]),s._v(" will be parsed as HTML string"),a("sup",[s._v("*")]),s._v(" #6231")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("showClose")]),s._v(" attribute to hide the close button #6402")])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("show-score")]),s._v(" attribute to determine if current score is displayed #6295")])])]),a("li",[s._v("Tabs\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("tab-position")]),s._v(" attribute #6096")])])]),a("li",[s._v("Radio\n"),a("ul",[a("li",[s._v("Improved accessibility #6101")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("border")]),s._v(" and "),a("code",{pre:!0},[s._v("size")]),s._v(" attributes #6690")])])]),a("li",[s._v("Checkbox\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("border")]),s._v(" and "),a("code",{pre:!0},[s._v("size")]),s._v(" attributes #6690")])])]),a("li",[s._v("Alert\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute so that the content can be centered #6876")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("background-color")]),s._v(", "),a("code",{pre:!0},[s._v("text-color")]),s._v(" and "),a("code",{pre:!0},[s._v("active-text-color")]),s._v(" attributes #7064")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("inline-message")]),s._v(" attribute to determine if the validation message is displayed in inline style #7032")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("status-icon")]),s._v(" attribute to display a feedback icon when validated #7032")])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("suffix")]),s._v(" and "),a("code",{pre:!0},[s._v("prefix")]),s._v(" named slots, "),a("code",{pre:!0},[s._v("suffixIcon")]),s._v(" and "),a("code",{pre:!0},[s._v("prefixIcon")]),s._v(" attributes to add contents inside the input box #7032")])])]),a("li",[s._v("Breadcrumb\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("separator-class")]),s._v(" attribute to support icons as item separators #7203")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("simple")]),s._v(" attribute to activate simple-styled Steps #7274")])])]),a("li",[s._v("Pagination\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("prev-text")]),s._v(" and "),a("code",{pre:!0},[s._v("next-text")]),s._v(" attributes to customize texts of prev page and next page #7005")])])])]),a("h4",{attrs:{id:"bug-fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),a("ul",[a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("v-model")]),s._v(" returning the second day of the selected week in week mode #6038")]),a("li",[s._v("Fixed the first input being cleared in "),a("code",{pre:!0},[s._v("daterange")]),s._v(" type #6021")])])]),a("li",[s._v("DateTimePicker\n"),a("ul",[a("li",[s._v("Fixed DateTimePicker and TimePicker affecting each other when picked #6090")]),a("li",[s._v("Fixed hour and second can be beyond limit when selecting time #6076")])])]),a("li",[s._v("TimePicker\n"),a("ul",[a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("v-model")]),s._v(" not update correctly when blurred #6023")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Fixed texts having blurry edges when opening and closing nesting dropdowns #6088")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151")])])])]),a("h4",{attrs:{id:"breaking-changes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes")]),a("ul",[a("li",[s._v("General\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("theme-default")])]),a("li",[a("code",{pre:!0},[s._v("change")]),s._v(" event of form components and "),a("code",{pre:!0},[s._v("current-change")]),s._v(" event of Pagination now only trigger on user interaction")]),a("li",[a("code",{pre:!0},[s._v("size")]),s._v(" attribute of Button and form components can no longer be set to "),a("code",{pre:!0},[s._v("large")]),s._v(". Now they accept "),a("code",{pre:!0},[s._v("medium")]),s._v(", "),a("code",{pre:!0},[s._v("small")]),s._v(" and "),a("code",{pre:!0},[s._v("mini")])]),a("li",[s._v("To facilitate the use of third-party icons, "),a("code",{pre:!0},[s._v("icon")]),s._v(" attribute of Button and Steps, "),a("code",{pre:!0},[s._v("prefix-icon")]),s._v(" and "),a("code",{pre:!0},[s._v("suffix-icon")]),s._v(" attributes of Input now require a full class name")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute. Now the size of Dialog can be configured by "),a("code",{pre:!0},[s._v("width")]),s._v(" and "),a("code",{pre:!0},[s._v("fullscreen")])]),a("li",[s._v("Now the visibility of Dialog cannot be controlled by "),a("code",{pre:!0},[s._v("v-model")])])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("text-template")]),s._v(" is renamed to "),a("code",{pre:!0},[s._v("score-template")])])])]),a("li",[s._v("Dropdown\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("menu-align")]),s._v(" is renamed to "),a("code",{pre:!0},[s._v("placement")]),s._v(". Now it supports more positions")])])]),a("li",[s._v("Transfer\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("footer-format")]),s._v(" is renamed to "),a("code",{pre:!0},[s._v("format")])])])]),a("li",[s._v("Switch\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("on-text")]),s._v(" and "),a("code",{pre:!0},[s._v("off-text")]),s._v(" attributes now don't have default values")])])]),a("li",[s._v("Tag\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("type")]),s._v(" attribute now accepts "),a("code",{pre:!0},[s._v("success")]),s._v(", "),a("code",{pre:!0},[s._v("info")]),s._v(", "),a("code",{pre:!0},[s._v("warning")]),s._v(" and "),a("code",{pre:!0},[s._v("danger")])]),a("li",[a("code",{pre:!0},[s._v("close-transition")]),s._v(" is renamed to "),a("code",{pre:!0},[s._v("disable-transitions")])])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("theme")]),s._v(" attribute. The color of Menu can be configured using "),a("code",{pre:!0},[s._v("background-color")]),s._v(", "),a("code",{pre:!0},[s._v("text-color")]),s._v(" and "),a("code",{pre:!0},[s._v("active-text-color")])])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("icon")]),s._v(" attribute. Now the suffix icon can be configured using "),a("code",{pre:!0},[s._v("suffix-icon")]),s._v(" attribute or "),a("code",{pre:!0},[s._v("suffix")]),s._v(" named slot")]),a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("on-icon-click")]),s._v(" attribute and "),a("code",{pre:!0},[s._v("click")]),s._v(" event. Now to add click handler on icons, please use named slots")])])]),a("li",[s._v("Autocomplete\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("custom-item")]),s._v(" attribute. Now the template of input suggestions can be customized using "),a("code",{pre:!0},[s._v("scoped slot")])])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Removed support for customizing column template using "),a("code",{pre:!0},[s._v("inline-template")])])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute")]),a("li",[s._v("Now the Steps will fill its parent container by default")])])])]),a("h2",{attrs:{id:""}},[a("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[s._v("¶")])]),a("p",[a("i",[a("sup",[s._v("*")]),s._v(" Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",{pre:!0},[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",{pre:!0},[s._v("message")]),s._v(" to user-provided content.")])]),a("h3",{attrs:{id:"1-4-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.7")]),a("p",[a("em",[s._v("2017-10-16")])]),a("ul",[a("li",[s._v("Fixed compatibility of Autocomplete and Vue 2.5.x, #6942 (by @rennai)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("allow-focus")]),s._v(" attribute for Switch, #7494 (by @breadadams)")])]),a("h3",{attrs:{id:"1-4-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.6")]),a("p",[a("em",[s._v("2017-09-27")])]),a("ul",[a("li",[s._v("Fixed Slider's button jumping to previous position when clicked, #7190")]),a("li",[s._v("Fixed Tooltip "),a("code",{pre:!0},[s._v("disabled")]),s._v(" regression, #7198")]),a("li",[s._v("Fixed Cascader not correctly filter options when "),a("code",{pre:!0},[s._v("props")]),s._v(" is set, #7225")]),a("li",[s._v("Fixed an error when range typed DatePicker has an initial value of "),a("code",{pre:!0},[s._v("[]")]),s._v(", #7233")])]),a("h3",{attrs:{id:"1-4-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.5")]),a("p",[a("em",[s._v("2017-09-24")])]),a("ul",[a("li",[s._v("Rate's "),a("code",{pre:!0},[s._v("colors")]),s._v(" attribute now supports dynamic updates, #6872 @lukaszb")]),a("li",[s._v("Fixed Tree not highlighting tree node whose value of "),a("code",{pre:!0},[s._v("node-key")]),s._v(" is 0, #6917")]),a("li",[s._v("Fixed initially disabled Dropdown not showing menu when it's enabled, #6969")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("hide-after")]),s._v(" attribute for Tooltip, #6401 @ryatziv")]),a("li",[s._v("Fixed cancel button of TimePicker not cancel picked value when clicked, #7028")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("selectWhenUnmatched")]),s._v(" attribute for Autocomplete, #6428 @ryatziv")]),a("li",[s._v("Fixed when "),a("code",{pre:!0},[s._v("beforeUpload")]),s._v(" of a file returns false, other files are aborted by Upload, #7077")]),a("li",[s._v("Fixed disabled dates of DatePicker in month view and year view not displayed correctly in the west hemisphere, #7114")]),a("li",[a("code",{pre:!0},[s._v("default-value")]),s._v(" of DatePicker now supports daterange type, #7073 @wacky6")])]),a("h3",{attrs:{id:"1-4-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.4")]),a("p",[a("em",[s._v("2017-09-05")])]),a("ul",[a("li",[s._v("Fixed all months disabled in DatePicker month view when "),a("code",{pre:!0},[s._v("disabledDate")]),s._v(" is set, #6768 @qingdengyue")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("debounce")]),s._v(" attribute for Slider, #6820 @langgo")]),a("li",[s._v("Fixed value of Pagination jumper can be bigger than the total page count, #6842 @huguangju")]),a("li",[s._v("Fixed TimePicker's focus slipping away when selecting hour to 23 with mouse scroll, #6719 @qingdengyue")])]),a("h3",{attrs:{id:"1-4-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.3")]),a("p",[a("em",[s._v("2017-08-25")])]),a("ul",[a("li",[s._v("Fixed style bug when Progress's "),a("code",{pre:!0},[s._v("percentage")]),s._v(" is "),a("code",{pre:!0},[s._v("0")]),s._v(", #6551 @Kingwl")]),a("li",[s._v("Fixed Carousel items flashing when switching, #6394")]),a("li",[s._v("Fixed disabled Button not prevent event propagation when clicked on its text area, #6421")]),a("li",[s._v("Fixed disabled dates calculation in DatePicker's month view, #6363")]),a("li",[s._v("Fixed key enter event being stopped propagation in Autocomplete, #6499 @leezng")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("amPm")]),s._v(" not supported in DatePicker i18n, #6574")]),a("li",[s._v("Fixed clicking or dragging error of Slider when it switches from invisible to visible, #6593")]),a("li",[s._v("Fixed Alert using small icons when its "),a("code",{pre:!0},[s._v("description")]),s._v(" is passed via default slot, #6612 @leezng")])]),a("h3",{attrs:{id:"1-4-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.2")]),a("p",[a("em",[s._v("2017-08-09")])]),a("ul",[a("li",[s._v("Fixed Select marking option of "),a("code",{pre:!0},[s._v("value")]),s._v(" equal to "),a("code",{pre:!0},[s._v("0")]),s._v(" as selected when the initial value is null and bound to an object-typed value, #6143")]),a("li",[s._v("Fixed Step style issue when "),a("code",{pre:!0},[s._v("status")]),s._v(" is "),a("code",{pre:!0},[s._v("error")]),s._v(", #6155 @wacky6")]),a("li",[s._v("Fixed Cascader selecting parent item when moving mouse quickly after clicking a leaf item, #6199")]),a("li",[s._v("Fixed Menu not hiding submenus when collapsed, #6200")]),a("li",[s._v("Fixed status of the inner native input of Switch not syncing with the component, #6205 @wacky6")]),a("li",[s._v("Fixed wrong button positioning of Slider after window is resized, #6263")]),a("li",[s._v("Fixed Autocomplete not hiding dropdown menu on blur, #6256")]),a("li",[s._v("Fixed hitting enter on jumper of Pagination not trigger page change event in IE, #6306 @qingdengyue")]),a("li",[s._v("Fixed InputNumber style issue when its "),a("code",{pre:!0},[s._v("size")]),s._v(" is "),a("code",{pre:!0},[s._v("large")]),s._v(" or "),a("code",{pre:!0},[s._v("small")]),s._v(", #6310 @JeremyWuuuuu")]),a("li",[s._v("Fixed i18n failure for some texts in DatePicker, #6328")]),a("li",[s._v("Fixed Slider value changing to minimum when its button is clicked, #6359")])]),a("h3",{attrs:{id:"1-4-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.1")]),a("p",[a("em",[s._v("2017-07-28")])]),a("ul",[a("li",[s._v("Fixed child nodes expanding when checking parent node in Tree, #6029")]),a("li",[s._v("Fixed checking behavior error of Tree, #6034")]),a("li",[s._v("Fixed FormItem not inheriting "),a("code",{pre:!0},[s._v("label-width")]),s._v(" as a Form's direct child, #6044")]),a("li",[s._v("Fixed Menu incorrectly showing SubMenu in collapse mode, #6111")]),a("li",[s._v("Fixed render order error of "),a("code",{pre:!0},[s._v("v-if")]),s._v(" controlled dynamic TabPanes, #6066")]),a("li",[s._v("Fixed Popover still popping up after mouse leaves within "),a("code",{pre:!0},[s._v("open-delay")]),s._v(", #6058 (by @laobubu)")]),a("li",[s._v("Fixed delete buttons still rendered in file list of disabled Upload, #6091")]),a("li",[s._v("Fixed background color error on hover of striped Table, #6024 (by @xtongs)")])]),a("h3",{attrs:{id:"1-4-0-boron"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-0-boron","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.0 Boron")]),a("p",[a("em",[s._v("2017-07-21")])]),a("h4",{attrs:{id:"new-features-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Message\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("message")]),s._v(" attribute now supports VNode, #5463 (by @egyptik)")])])]),a("li",[s._v("ColorPicker\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("active-change")]),s._v(" event, #5775")])])]),a("li",[s._v("Popover\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("open-delay")]),s._v(" attribute, #5842 (by @kaungmyatlwin)")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("A third parameter "),a("code",{pre:!0},[s._v("value")]),s._v(" is passed to "),a("code",{pre:!0},[s._v("formatter")]),s._v(", #5709 (by @haledeng)")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute, #5937")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("collapse")]),s._v(" attribute, #5941")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("value-key")]),s._v(" attribute, #5897")])])])]),a("h4",{attrs:{id:"fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("i18n failure for some texts, #5485")]),a("li",[s._v("returning a non-zero millisecond value when initial value is empty, #5663")]),a("li",[a("code",{pre:!0},[s._v("disabledDate")]),s._v(" affecting undesired date, #4946 (by @liyangworld)")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("style problems when a step is dynamically added or removed, #5456 (by @elfman)")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("highlight row misplaced when an expandable Table has fixed table columns, #5471 (by @elfman)")]),a("li",[a("code",{pre:!0},[s._v("classList")]),s._v(" not supported in some browsers, #5613 (by @flynntsc)")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("single Select unable to scroll to the selected item when the dropdown menu pops up, #5564（by @wacky6）")])])]),a("li",[s._v("Radio\n"),a("ul",[a("li",[s._v("border radius lost in RadioGroups with only one Radio, #5646 (by @YYvanYang)")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("unable to reselect previously deleted file when "),a("code",{pre:!0},[s._v("auto-upload")]),s._v(" is false, #5706")]),a("li",[s._v("delete button still visible and functioning when "),a("code",{pre:!0},[s._v("disabled")]),s._v(", #5841")]),a("li",[s._v("compatibility issue with Vue 2.4 "),a("code",{pre:!0},[s._v("key")]),s._v(", #5872")])])]),a("li",[s._v("MessageBox\n"),a("ul",[a("li",[s._v("clicking cancel buttons getting resolved when not invoked as a "),a("code",{pre:!0},[s._v("confirm")]),s._v(" or "),a("code",{pre:!0},[s._v("prompt")]),s._v(", #5658")])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[s._v("active icons not reflecting decimal part of initial value, #5785")])])]),a("li",[s._v("Pagination\n"),a("ul",[a("li",[s._v("compatibility issue of total page display with vue-i18n@6.x, #5796 (by @mario56)")]),a("li",[s._v("apostrophe incorrectly showing up when current page is one page less than total page, #5861 (by @openks)")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("style problems when bound to invisible elements, #5649 (by @xiongzixiao)")])])]),a("li",[s._v("Cascader\n"),a("ul",[a("li",[s._v("text in the input box not vertically aligned, #5819 (by @jianzhi92)")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("setCheckedKeys")]),s._v(" and "),a("code",{pre:!0},[s._v("setCheckedNodes")]),s._v(" in lazy mode, #5937")]),a("li",[s._v("loading all descendent nodes when a parent node is checked in lazy mode, #5963")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("label named slot not working when "),a("code",{pre:!0},[s._v("label")]),s._v(" is not assigned on FormItem, #5921")])])]),a("li",[s._v("Tooltip\n"),a("ul",[a("li",[s._v("not working in Vue 2.4.x when the triggering element is a custom component, #5916")])])])]),a("h4",{attrs:{id:"breaking-changes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("when value is an object, "),a("code",{pre:!0},[s._v("value-key")]),s._v(" is required as its unique identity key, #5897")])])])]),a("h3",{attrs:{id:"1-3-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.7")]),a("p",[a("em",[s._v("2017-06-18")])]),a("ul",[a("li",[s._v("Fixed Table with async data not showing summary row, #5318")]),a("li",[s._v("Fixed Pagination's jumper value not sync with current page, #5377")]),a("li",[s._v("Fixed DatePicker's shortcut panel overflow issue, #5297 (by @alashow)")]),a("li",[s._v("Fixed clicking Switch not responding when some text on the page is selected, #5411")]),a("li",[s._v("The red wildcard indicating required field of Form is now responsive, #5403")]),a("li",[s._v("Fixed initial-index of Carousel not working, #5334")]),a("li",[s._v("Fixed Popover enable to be focused when nested in a Dialog, #5336")])]),a("h3",{attrs:{id:"1-3-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.6")]),a("p",[a("em",[s._v("2017-06-09")])]),a("ul",[a("li",[s._v("Fixed inconsistency of ColorPicker's default value and panel value, #5183 (by @Kingwl)")]),a("li",[s._v("Fixed ColorPicker not able to change hue in the panel when its default value is white, #5184 (by @Kingwl)")]),a("li",[s._v("Fixed Select's dropdown taking multiple clicks to expand when nested in a Dialog after scrolling, #5226")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("props")]),s._v(" property for Autocomplete, #5282")]),a("li",[s._v("Fixed dropdown of DatePicker not hiding when Tab key is pressed after manual input, #5149 (by @ChuckFields)")])]),a("h3",{attrs:{id:"1-3-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.5")]),a("p",[a("em",[s._v("2017-06-03")])]),a("ul",[a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("default-first-option")]),s._v(" of Select not working in remote filtering, #5084")]),a("li",[s._v("Fixed InputNumber not aligning with other form components, #5127")]),a("li",[s._v("Fixed inline FormItem having no effect on mixed Input, #5151")]),a("li",[s._v("Fixed height of FormItem being different in Firefox from other browsers, #5152")]),a("li",[s._v("Fixed items with a "),a("code",{pre:!0},[s._v("value")]),s._v(" of 0 in Cascader can not be expanded, #5172 (by @Kingwl)")]),a("li",[s._v("Fixed Autocomplete not triggering native "),a("code",{pre:!0},[s._v("keydown")]),s._v(" and "),a("code",{pre:!0},[s._v("keyup")]),s._v(" events, #5129")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("clear")]),s._v(" event for Select, #5112")]),a("li",[s._v("Fixed Cascader's dropdown menu not updating its position in some situations, #5064")]),a("li",[s._v("Better accessibility for Dialog and MessageBox, #4786")])]),a("h3",{attrs:{id:"1-3-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.4")]),a("p",[a("em",[s._v("2017-05-23")])]),a("ul",[a("li",[s._v("Fixed highlight and stripe effects of Table with expandable rows, #4871 (by @mu-yu)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("default-first-option")]),s._v(" for Select, #4838 (by @wacky6)")]),a("li",[s._v('Fixed Select with no options not displaying "No data" text when '),a("code",{pre:!0},[s._v("allow-create")]),s._v(" is true, #4977")])]),a("h3",{attrs:{id:"1-3-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.3")]),a("p",[a("em",[s._v("2017-05-14")])]),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("visible-change")]),s._v(" event for Dropdown, #4818 (by @luciy)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("tag")]),s._v(" attribute for Col and Row, #4799")]),a("li",[s._v("Fixed Cascader search functionality regression, #4812")]),a("li",[s._v("Fixed DatePicker triggering watch when "),a("code",{pre:!0},[s._v("type")]),s._v(" is range, #4837 (by @wacky6)")]),a("li",[s._v("Fixed numbers in TimePicker not align vertically, #4847 (by @pengchongfu)")]),a("li",[s._v("Fixed Dialog not triggering "),a("code",{pre:!0},[s._v("before-close")]),s._v(" hook when ESC is pressed, #4819 (by @patriciussanctus)")]),a("li",[s._v("Fixed multiple MessageBox not rendering content correctly when some of the "),a("code",{pre:!0},[s._v("message")]),s._v(" is a VNode")]),a("li",[s._v("Fixed Checkbox not focused when navigating with tab")])]),a("h3",{attrs:{id:"1-3-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.2")]),a("p",[a("em",[s._v("2017-05-10")])]),a("ul",[a("li",[s._v("Fixed undefined custom component "),a("code",{pre:!0},[s._v("el-collapse-transition")]),s._v(" error when importing some components on demand, #4728")]),a("li",[s._v("Fixed vertical alignment issue of Pagination in FireFox, #4756")]),a("li",[s._v("Fixed dropdown panel view not updating after binding value of DatePicker is programmatically changed when "),a("code",{pre:!0},[s._v("type")]),s._v(" is week, #4739")]),a("li",[s._v("Fixed height calculation errors of Table with summary rows, #4736")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("before-filter")]),s._v(" attribute for Cascader, #4774")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("debounce")]),s._v(" attribute for InputNumber, #4712（by @pengchongfu）")])]),a("h3",{attrs:{id:"1-3-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.1")]),a("p",[a("em",[s._v("2017-05-06")])]),a("ul",[a("li",[s._v("Fixed Autocomplete clearing input box when typing Chinese, #4718")]),a("li",[s._v("Fixed async Table's summary row not scroll with Table, #4717")]),a("li",[s._v("Fixed Dialog not closing correctly after pressing ESC when "),a("code",{pre:!0},[s._v("close-on-press-esc")]),s._v(" is true, #4706")]),a("li",[s._v("Fixed wrong parameter in "),a("code",{pre:!0},[s._v("change")]),s._v(" event of Switch when "),a("code",{pre:!0},[s._v("on-value")]),s._v(" and "),a("code",{pre:!0},[s._v("off-value")]),s._v(" are assigned, #4675")])]),a("h3",{attrs:{id:"1-3-0-beryllium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-0-beryllium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.0 Beryllium")]),a("p",[a("em",[s._v("2017-05-05")])]),a("h4",{attrs:{id:"new-features-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("New component: Transfer")]),a("li",[s._v("Now you can use our pre-defined transitions")]),a("li",[s._v("Vertical mode for Slider, can be activated by the "),a("code",{pre:!0},[s._v("vertical")]),s._v(" attribute, #4410 (by @devange)")]),a("li",[s._v("Button style for CheckboxGroup, #3697 (by @mdartic)")]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("setCurrentRow")]),s._v(" method, #4390")]),a("li",[s._v("Added summary row, with three attributes: "),a("code",{pre:!0},[s._v("show-summary")]),s._v(", "),a("code",{pre:!0},[s._v("sum-text")]),s._v(" and "),a("code",{pre:!0},[s._v("summary-method")]),s._v(", #4484")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("filter-placement")]),s._v(" attribute for TableColumn, #4491")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Added a "),a("code",{pre:!0},[s._v("before-close")]),s._v(" hook, #4432")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("visible")]),s._v(" attribute, which supports the "),a("code",{pre:!0},[s._v(".sync")]),s._v(" modifier, #4539")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute, #4473")]),a("li",[a("code",{pre:!0},[s._v("on-change")]),s._v(" now also triggers when a file is added, #4447")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("abort")]),s._v(" method")])])]),a("li",[s._v("Switch now supports "),a("code",{pre:!0},[s._v("on-value")]),s._v(" and "),a("code",{pre:!0},[s._v("off-value")]),s._v(", so that you can customize its values, #4403")]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("default-value")]),s._v(" attribute for initially displayed date in the dropdown, #4222 (by @wacky6)")]),a("li",[a("code",{pre:!0},[s._v("type")]),s._v(" now supports dynamic updates, #4417 (by @coffeedeveloper)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("label")]),s._v(" attribute for CarouselItem, #4317 (by @paul-blundell)")])])]),a("li",[a("code",{pre:!0},[s._v("message")]),s._v(" of MessageBox now supports VNode, #4550")]),a("li",[a("code",{pre:!0},[s._v("current-page")]),s._v(" of Pagination "),a("code",{pre:!0},[s._v("current-page")]),s._v(" now supports "),a("code",{pre:!0},[s._v(".sync")]),s._v(", #4539")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("label")]),s._v(" slot for Form, so you can customize label's content, #4634")])]),a("h4",{attrs:{id:"fixes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Compatibility issues of Select and Table with Vue 2.3.x, #4518")]),a("li",[a("code",{pre:!0},[s._v("disabledDate")]),s._v(" of DatePicker having no effect on typed value in the input box, #4309")]),a("li",[s._v("An issue when the key of a Tree node is number 0, #4415")]),a("li",[s._v("TimePicker number not align when picked, #4425 (by @pengchongfu)")]),a("li",[s._v("Autocomplete frequently triggering searching method when typing Chinese, #4393 (by @qazbnm456)")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("not able to select the same file multiple times, #4461")]),a("li",[s._v("not displaying preview image when is "),a("code",{pre:!0},[s._v("auto-upload")]),s._v(" false, #4572")]),a("li",[s._v("some style errors, #4643")])])]),a("li",[s._v("Style bug of RadioGroup when nested in a FormItem, #4336")]),a("li",[s._v("ColorPicker not clear the color panel when bound value is emptied, #4668 (by @pengchongfu)")]),a("li",[a("code",{pre:!0},[s._v("show-overflow-tooltip")]),s._v(" of Table not working in Safari, #4157 (by @renxia)")])]),a("h4",{attrs:{id:"breaking-changes-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Only compatible with Vue 2.3.0+")])]),a("h3",{attrs:{id:"1-2-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.9")]),a("p",[a("em",[s._v("2017-04-19")])]),a("ul",[a("li",[s._v("Fixed RadioButton not working properly when some texts on the page are selected, #4217")]),a("li",[s._v("Fixed the toggle-all checkbox of Tree not working in some browsers, #4107 (by @pengchongfu)")]),a("li",[s._v("Fixed Cascader clear button not working, #4167 (by @pengchongfu)")]),a("li",[s._v("Fixed router switching error when the page has a Table with Tooltips, #4085")]),a("li",[s._v("Fixed Upload not able to remove selected files, #4233")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("onClick")]),s._v(" attribute for Notification, #4221 (by @amouillard)")]),a("li",[s._v("Fixed binding value of DatePicker becoming undefined when cleared, #4186 (by @pengchongfu)")]),a("li",[s._v("Fixed style error of ColorPicker when nested in a FormItem, #4303")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("enterable")]),s._v(" attribute for Tooltip, #4210")])]),a("h3",{attrs:{id:"1-2-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.8")]),a("p",[a("em",[s._v("2017-04-07")])]),a("ul",[a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("resetFields")]),s._v(" of Form reassigning form items, #3840 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("max")]),s._v(" and "),a("code",{pre:!0},[s._v("min")]),s._v(" attributes for CheckboxGroup, #3700 (by @mdartic)")]),a("li",[s._v("Fixed DatePicker adding one to picked month in some specific days, #3935")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("closeAll")]),s._v(" method for Message, #3966 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("format-tooltip")]),s._v(" attribute for Slider, #3657 (by @liyanlong)")]),a("li",[s._v("Fixed filter panel of Table being when nested in a Dialog, #4023 (by @liyanlong)")]),a("li",[s._v("Fixed single Select unable to create new items in Vue 2.2.x, #3984")]),a("li",[s._v("Fixed Row disappearing in all breakpoints if its "),a("code",{pre:!0},[s._v("span")]),s._v(" is set to 0 in some breakpoints, #4053")])]),a("h3",{attrs:{id:"1-2-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.7")]),a("p",[a("em",[s._v("2017-03-29")])]),a("ul",[a("li",[s._v("Fixed Select not compatible with Vue 2.2.6, #3797")]),a("li",[s._v("Improve performance for rendering tooltip in Table, #3478")]),a("li",[s._v("Add "),a("code",{pre:!0},[s._v("tooltip-effect")]),s._v(" property for Table")])]),a("h3",{attrs:{id:"1-2-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.6")]),a("p",[a("em",[s._v("2017-03-28")])]),a("ul",[a("li",[s._v("Fixed Switch compatible with SSR, #3752")]),a("li",[s._v("Fixed the time of TimePicker calculating incorrectly, #3479")]),a("li",[s._v("Fixed the week of DatePicker formatting incorrectly, #2774")]),a("li",[s._v("Fixed the week of DatePicker initializing incorrectly, #3058")]),a("li",[s._v("Fixed the events of Popover destroying incorrectly, #3555")]),a("li",[s._v("Fixed InputNumber setInterval, #3514 (by @pengchongfu)")]),a("li",[s._v("Fixed RadioButton css files, #3276")]),a("li",[s._v("Fixed hover style on striped Table, #3696 (by @nicoeg)")]),a("li",[s._v("Fixed Slider's button jumping left issue, #3664 (by @gabrielboliveira)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("delete-tag")]),s._v(" event for Select, #3663 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("onPick")]),s._v(" option for DatePicker, #2921")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("status")]),s._v(" for Step, #3722")]),a("li",[s._v("Added full example for on-demand importing, #3302")])]),a("h3",{attrs:{id:"1-2-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.5")]),a("p",[a("em",[s._v("2017-03-19")])]),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("show-tooltip")]),s._v(" property for Slider, #3430 (by @gabrielboliveira)")]),a("li",[s._v("Fixed Slider precision not updating when "),a("code",{pre:!0},[s._v("step")]),s._v(" is updated, #3475 (by @gabrielboliveira)")]),a("li",[s._v("Fixed a bug that when the window is at the criticality of showing the scrollbar, the popup of Tooltip inside a Table will cause the Table to shake horizontally, #3549")]),a("li",[s._v("Fixed Table automatically shrinking vertically in some conditions, #3539")]),a("li",[s._v("Fixed popup components inside a Popover not hiding when blank area is clicked, #3451 (by @nicoeg)")]),a("li",[s._v("Now Col will hide itself if its "),a("code",{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(" or "),a("code",{pre:!0},[s._v("lg")]),s._v(" is set to 0, #3564")])]),a("h3",{attrs:{id:"1-2-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.4")]),a("p",[a("em",[s._v("2017-03-09")])]),a("ul",[a("li",[s._v("Fixed Carousel not responding to dynamic data updates, #3159")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("cell-dblclick")]),s._v(" of Table not firing issue, #3305")]),a("li",[s._v("Fixed disabled Cascader not displaying initial value, #3297")]),a("li",[s._v("Fixed Slider not correctly displaying initial value when "),a("code",{pre:!0},[s._v("show-input")]),s._v(" is true, #3281")]),a("li",[s._v("Fixed Tooltip error in server-side rendering, #3214")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("range-separator")]),s._v(" of DatePicker not working issue, #3378")]),a("li",[s._v("Added support for dynamically update loading text of Loading directive, #3345 (by @imyzf)")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("http-request")]),s._v(" attribute for Upload, #3387")]),a("li",[s._v("Added support for hiding col if its "),a("code",{pre:!0},[s._v("span")]),s._v(" is 0, #3313")])]),a("h3",{attrs:{id:"1-2-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.3")]),a("p",[a("em",[s._v("2017-03-01")])]),a("ul",[a("li",[s._v("Fixed Tooltip, #3152")])]),a("h3",{attrs:{id:"1-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.2")]),a("p",[a("em",[s._v("2017-02-28")])]),a("ul",[a("li",[s._v("Fixed compatibility issues with Vue 2.2, #3002 #3067 #3097")]),a("li",[s._v("Fixed Cascader's dropdown hiding behind Dialog when nested in a Dialog, #3035")]),a("li",[s._v("Fixed incorrect parameter of "),a("code",{pre:!0},[s._v("change")]),s._v(" event of Cascader, #3014")]),a("li",[s._v("Add "),a("code",{pre:!0},[s._v("change")]),s._v(" event for ColorPicker, #3049 (by @nicoeg)")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("setCheckedKeys")]),s._v(" method of Tree not working on non-leaf nodes, #2967 (by @rainyLeo)")]),a("li",[s._v("Fixed Tooltip not compatible with "),a("code",{pre:!0},[s._v("router-link")]),s._v(", #3143")])]),a("h3",{attrs:{id:"1-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.1")]),a("p",[a("em",[s._v("2017-02-23")])]),a("ul",[a("li",[s._v("Fixed SSR regression in version 1.2.0, #2982")]),a("li",[s._v("Fixed horizontal scroll buttons not showing in Tabs, #2974")]),a("li",[s._v("Fixed wrong calculation of height after the "),a("code",{pre:!0},[s._v("height")]),s._v(" attribute is updated dynamically in Table, #2979")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("cell-dblclick")]),s._v(" and "),a("code",{pre:!0},[s._v("header-dragend")]),s._v(" events for Table, #2983 #2988")]),a("li",[s._v("Fixed form items showing a left padding inside an inline Form with a specified "),a("code",{pre:!0},[s._v("label-width")]),s._v(", #2990")]),a("li",[s._v("Fixed Cascader's dropdown misplaces in some conditions, #2992")])]),a("h3",{attrs:{id:"1-2-0-lithium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-0-lithium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.0 Lithium")]),a("p",[a("em",[s._v("2017-02-22")])]),a("h4",{attrs:{id:"new-features-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Cascader and ColorPicker")]),a("li",[s._v("New attributes "),a("code",{pre:!0},[s._v("editable")]),s._v(" and "),a("code",{pre:!0},[s._v("addable")]),s._v(", and new events "),a("code",{pre:!0},[s._v("tab-add")]),s._v(" and "),a("code",{pre:!0},[s._v("edit")]),s._v(" for Tabs")]),a("li",[s._v("Language config files in UMD format")]),a("li",[s._v("New events "),a("code",{pre:!0},[s._v("node-expand")]),s._v(" and "),a("code",{pre:!0},[s._v("node-collapse")]),s._v(" for Tree, #2507 (by @masterzhang)")]),a("li",[s._v("New attribute "),a("code",{pre:!0},[s._v("indent")]),s._v(" for Tree, #2713")]),a("li",[s._v("Dialog's title now supports named slot, #2657")]),a("li",[s._v("New attribute "),a("code",{pre:!0},[s._v("range")]),s._v(" for Slider, #2751")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Attribute "),a("code",{pre:!0},[s._v("auto-upload")]),s._v(" that controls if files are uploaded immediately after selecting, and its default value is "),a("code",{pre:!0},[s._v("true")])]),a("li",[s._v("Event "),a("code",{pre:!0},[s._v("on-change")]),s._v(" that fires when file status changes")]),a("li",[s._v("Attribute "),a("code",{pre:!0},[s._v("list-type")]),s._v(" that configures the appearance of file list")])])]),a("li",[s._v("Scroll bars in Autocomplete are made prettier")])]),a("h4",{attrs:{id:"fixes-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Carousel not responding to contents' update, #2775")]),a("li",[s._v("Numbers in TimePicker not align in some conditions, #2948")]),a("li",[s._v("TimePicker only responding to odd clicks in some conditions, #2884 (by @k55k32)")]),a("li",[s._v("Tabs' display order error when tab-pane is dynamically changed, #2898")]),a("li",[s._v("Menu highlighting menu-item when "),a("code",{pre:!0},[s._v("default-active")]),s._v(" is assigned to an non-existent item")]),a("li",[s._v("Collapse's style issue when nested")])]),a("h4",{attrs:{id:"breaking-changes-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Tooltip is refactored, no additional HTML tags will be rendered so that the structures of nested component stay unchanged, #2459")]),a("li",[s._v("The backdrop of Dialog now inserts to body element by default, #2556")]),a("li",[s._v("Tabs don't maintain tab instances internally any more, so they should be handled externally via events emitted by Tabs, #2567")]),a("li",[s._v("Upload is refactored\n"),a("ul",[a("li",[a("code",{pre:!0},[s._v("default-file-list")]),s._v(" renamed to "),a("code",{pre:!0},[s._v("file-list")]),s._v(", and "),a("code",{pre:!0},[s._v("show-upload-list")]),s._v(" renamed to "),a("code",{pre:!0},[s._v("show-file-list")])]),a("li",[a("code",{pre:!0},[s._v("thumbnail-mode")]),s._v(" removed")])])])]),a("h3",{attrs:{id:"1-1-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.6")]),a("p",[a("em",[s._v("2017-01-23")])]),a("ul",[a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("customClass")]),s._v(" of MessageBox affecting follow-up instances, #2472")]),a("li",[s._v("Fixed style issue of Select after being activated when located in a non-default-activated tab pane inside Tabs, #2466")]),a("li",[s._v("Fixed style missing issue for some components when imported on demand")]),a("li",[s._v("Fixed disabled filterable multiple Select still showing dropdown when clicked on a certain area, #2540")]),a("li",[s._v("Restored returning to original sorting in sortable Table columns, #2491")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("reset.css")]),s._v(" in "),a("code",{pre:!0},[s._v("theme-default")]),s._v(", #2378")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("range-separator")]),s._v(" attribute for DatePicker, #2579")]),a("li",[s._v("Published individual component packages: Table, DatePicker, Loading, Upload and Carousel")]),a("li",[s._v("Add Finnish (@groenroos)")])]),a("h3",{attrs:{id:"1-1-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.5")]),a("p",[a("em",[s._v("2017-01-17")])]),a("ul",[a("li",[s._v("Fixed Menu not activating corresponding menu item after router switching in router mode, #2451")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("value")]),s._v(" attribute of Collapse not supporting "),a("code",{pre:!0},[s._v("Number")]),s._v(" typed value, #2455")])]),a("h3",{attrs:{id:"1-1-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.4")]),a("p",[a("em",[s._v("2017-01-16")])]),a("ul",[a("li",[s._v("Fixed Input Number triggering "),a("code",{pre:!0},[s._v("change")]),s._v(" event when bound value is changed programmatically, #2329")]),a("li",[s._v("Fixed Menu not responding to "),a("code",{pre:!0},[s._v("$router")]),s._v(" changing in router mode, #2391")]),a("li",[s._v("Fixed Menu and Tree expanding state malfunctioning when clicked multiple times quickly, #2354")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("change")]),s._v(" event triggering mechanism of Input Number and Checkbox Group, now they do not fire when bound value is changed programmatically")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("on-icon-click")]),s._v(" attribute for Input, #2414")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute for Radio Group, #2411")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("accordion")]),s._v(" attribute for Tree, #2408")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("show-message")]),s._v(" attribute for Form, #2356")]),a("li",[s._v("Fixed sort clicking area of Table, updated default sorting related APIs, #2309 #2405 (by @njleonzhang)")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("firstDayOfWeek")]),s._v(" not working in ranged typed of DatePicker, #2353")]),a("li",[s._v("Fixed DatePicker displaying 1970 when initial value is null, #2388")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("filteredValue")]),s._v(" attribute for Table, #2348")]),a("li",[s._v("Fixed scrollable Table's style with empty data, #2396")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("beforeClose")]),s._v(" attribute for MessageBox, #2204")]),a("li",[s._v("Fixed filterable Select not showing dropdown when triangle icon is clicked, #2389")])]),a("p",[s._v("Breaking change")]),a("ul",[a("li",[s._v("The "),a("code",{pre:!0},[s._v("default-sort-prop")]),s._v(" and "),a("code",{pre:!0},[s._v("default-sort-order")]),s._v(" attributes added in 1.1.3 are now merged into an object-typed attribute")])]),a("h3",{attrs:{id:"1-1-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.3")]),a("p",[a("em",[s._v("2017-01-09")])]),a("ul",[a("li",[s._v("Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167")]),a("li",[s._v("Fixed DatePicker year calculating error when choosing the next year, #2152")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("default-sort-prop")]),s._v(" and "),a("code",{pre:!0},[s._v("default-sort-order")]),s._v(" attributes for Table, #2182 (by @njleonzhang)")]),a("li",[s._v("Fixed filterable Select filtering other options with initial value, #2196")]),a("li",[s._v("Added custom i18n processing, making Element compatible with i18n plugins other than "),a("code",{pre:!0},[s._v("vue-i18n")]),s._v(", #2129")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("resize")]),s._v(" attribute for Input, #2263 (by @Kingwl)")]),a("li",[s._v("Fixed Autocomplete not hiding dropdown when blurred, #2247")]),a("li",[s._v("Fixed style issues with nested Tabs, #2212 (by @Kingwl)")]),a("li",[s._v("Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192")])]),a("h3",{attrs:{id:"1-1-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),a("p",[a("em",[s._v("2016-12-30")])]),a("ul",[a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("sortable")]),s._v(" and "),a("code",{pre:!0},[s._v("fixed")]),s._v(" attribute of Table not working in Vue 2.1.7+")]),a("li",[s._v("Fixed Input Number not resetting on blur when input with illegal values, #2098")]),a("li",[s._v("Removed "),a("code",{pre:!0},[s._v("title")]),s._v(" scoped slot of Collapse, and added "),a("code",{pre:!0},[s._v("title")]),s._v(" named slot, #2100")]),a("li",[s._v("Fixed range selection in TimePicker not working issue")]),a("li",[s._v("Fixed Tabs' active tab switching when a non-active tab is removed, #2106")]),a("li",[s._v("Fixed console error reporting when navigating Select with arrow keys, #2120")]),a("li",[s._v("Fixed incorrect validation timing of filterable Select in Form, #2120")])]),a("h3",{attrs:{id:"1-1-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),a("p",[a("em",[s._v("2016-12-29")])]),a("ul",[a("li",[s._v("Fixed compatibility issue with latest Vue due to compilation")])]),a("h3",{attrs:{id:"1-1-0-helium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-0-helium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0 Helium")]),a("p",[a("em",[s._v("2016-12-29")])]),a("h4",{attrs:{id:"new-features-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Carousel and Collapse")]),a("li",[s._v("SSR supported")]),a("li",[s._v("Scrollbars' style inside components is upgraded")]),a("li",[s._v("Table now supports custom templates via "),a("a",{attrs:{href:"http://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("scoped slots")]),s._v("; the good old "),a("code",{pre:!0},[s._v("inline-template")]),s._v(" is still compatible, but it's no longer recommended and is likely to be removed in the future")]),a("li",[s._v("Table now supports expandable rows")]),a("li",[s._v("DatePicker now supports specifying the first day of week")]),a("li",[s._v("TimeSelect now supports "),a("code",{pre:!0},[s._v("maxTime")])]),a("li",[s._v("Autocomplete now supports "),a("code",{pre:!0},[s._v("popper-class")])]),a("li",[s._v("To customize template of Tab-Pane, now you can use the "),a("code",{pre:!0},[s._v("slot")]),s._v(" named "),a("code",{pre:!0},[s._v("label")])])]),a("h4",{attrs:{id:"fixes-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[a("code",{pre:!0},[s._v("change")]),s._v(" event of DatePicker incorrectly triggering multiple times, #2070")]),a("li",[s._v("Width shaking of tab-pane while initializing, #1883")])]),a("h4",{attrs:{id:"breaking-changes-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Only compatible with Vue 2.1.6 and beyond")]),a("li",[s._v("Parameters of Form validateField() methods are updated")]),a("li",[s._v("Alert's render-content attribute is removed, and now you can pass your custom template via default slot")]),a("li",[s._v("The box models of Input and Select are updated from "),a("code",{pre:!0},[s._v("block")]),s._v(" to "),a("code",{pre:!0},[s._v("inline-block")])]),a("li",[s._v("The box model of Tabs is updated from "),a("code",{pre:!0},[s._v("inline-block")]),s._v(" to "),a("code",{pre:!0},[s._v("block")]),s._v(", and Tab-Pane's "),a("code",{pre:!0},[s._v("label-content")]),s._v(" attribute is removed")]),a("li",[s._v("The dropdown of Autocomplete now inserts directly to "),a("code",{pre:!0},[s._v("")]),s._v(", not "),a("code",{pre:!0},[s._v("")]),s._v(" any more")])]),a("h3",{attrs:{id:"1-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.9")]),a("p",[a("em",[s._v("2016-12-27")])]),a("ul",[a("li",[s._v("Fixed DatePicker incorrectly triggering input event, #1834")]),a("li",[s._v("Fixed Tree reporting "),a("code",{pre:!0},[s._v("event is undefined")]),s._v(" error in Firefox, #1945")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("change")]),s._v(" event for DatePicker, whose parameter is the formatted value, #1841")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("header-align")]),s._v(" attribute for Table, #1424")]),a("li",[s._v("Fixed single select Table's highlight style not removing when data is removed, #1890")]),a("li",[s._v("Fixed filterable Select lagging issue with more options, #1933")]),a("li",[s._v("Fixed multiple disabled Select not disabling removing selected options issue, #2001")]),a("li",[s._v("Fixed Col style not working in "),a("code",{pre:!0},[s._v("xs")]),s._v(", #2011")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("value")]),s._v(" attribute for Tab, #2008")]),a("li",[s._v("Fixed InputNumber "),a("code",{pre:!0},[s._v("change")]),s._v(" event incorrectly firing multiple times in some conditions, #1999")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("clearable")]),s._v(" attribute for DatePicker, #1994")]),a("li",[s._v("Fixed Form always passing validation in async mode, #1936")])]),a("h3",{attrs:{id:"1-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.8")]),a("p",[a("em",[s._v("2016-12-20")])]),a("ul",[a("li",[s._v("Fixed nested Popup from event bubbling, #1677")]),a("li",[s._v("Fixed the issue that datetimerange-typed DatePicker can not select time, #1758")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("change")]),s._v(" event not firing correctly of Slider, #1809")]),a("li",[s._v("Fixed Loading's spinner splitting while animating in some conditions, #1786")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("loading-text")]),s._v(", "),a("code",{pre:!0},[s._v("no-data-text")]),s._v(", "),a("code",{pre:!0},[s._v("no-match-text")]),s._v(" properties and "),a("code",{pre:!0},[s._v("visible-change")]),s._v(" event for Select, #1849")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("popper-class")]),s._v(" property for DatePicker, Select and Tooltip, #1806")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("expand-on-click-node")]),s._v(", "),a("code",{pre:!0},[s._v("current-node-key")]),s._v(" properties and "),a("code",{pre:!0},[s._v("current-change")]),s._v(" event for Tree, #1805 #1807")]),a("li",[s._v("Added the third parameter "),a("code",{pre:!0},[s._v("column")]),s._v(" for Table's "),a("code",{pre:!0},[s._v("row-click")]),s._v(" event, #1808")]),a("li",[s._v("Fixed an error when pages with Checkbox switching routes due to "),a("code",{pre:!0},[s._v("computed")]),s._v(" property being cached, #1860")]),a("li",[s._v("Added the tab instance as a parameter for TabPanel's "),a("code",{pre:!0},[s._v("label-content")]),s._v(" render function, #1857")]),a("li",[s._v("Added infinite submenus support for NavMenu in vertical mode, #1851")]),a("li",[s._v("Updated Checkbox so that it works without a binding value, #1818")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("onProgress")]),s._v(" hook for Progress, #1782")]),a("li",[s._v("Fixed Tab not updating active bar with dynamic label, #1761")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("filter-change")]),s._v(" event for Table, and "),a("code",{pre:!0},[s._v("column-key")]),s._v(" property for TableColumn, #1876")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("hide-on-click")]),s._v(" property for Dropdown, #1879")])]),a("h3",{attrs:{id:"1-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.7")]),a("p",[a("em",[s._v("2016-12-14")])]),a("ul",[a("li",[s._v("Fixed DatePicker dropdown appears when hovering on the clear button")]),a("li",[s._v("Fixed DatePicker displays a wrong date when its initial value is null")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("row-contextmenu")]),s._v(" event and "),a("code",{pre:!0},[s._v("max-height")]),s._v(" attribute for Table, #1663 #1674")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("customClass")]),s._v(" attribute for MessageBox, #1707")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("iconClass")]),s._v(" and "),a("code",{pre:!0},[s._v("customClass")]),s._v(" attributes for Message and Notification, #1671")]),a("li",[s._v("Added empty slot for Table, #1737")]),a("li",[s._v("Added old value as a second parameter in change event for InputNumber")])]),a("h3",{attrs:{id:"1-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.6")]),a("p",[a("em",[s._v("2016-12-09")])]),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute for Tabs, #1620")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute for DatePicker input, #1440")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("datetimerange")]),s._v(" DatePicker's panel not showing correct date if initial value is present, #1129")]),a("li",[s._v("Fixed DatePicker display error when switching year, #1607")]),a("li",[s._v("Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604")]),a("li",[s._v("Fixed TimePicker not refreshing value after clicking the clear button, #1583")]),a("li",[s._v("Fixed remote filterable Select display error when its value is an object, #1593")]),a("li",[s._v("Fixed Select's clear button still working bug when it's "),a("code",{pre:!0},[s._v("disabled")]),s._v(", #1619")]),a("li",[s._v("Fixed Switch's background color error when its "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute is dynamically changed, #1627")]),a("li",[s._v("Fixed some style bugs of Table")])]),a("h3",{attrs:{id:"1-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.5")]),a("p",[a("em",[s._v("2016-12-06")])]),a("ul",[a("li",[s._v("Fixed Select with async options and binding value displaying value instead of label, #1537")]),a("li",[s._v("Fixed Select reports an error when initial binding value is an empty object, #1533")]),a("li",[s._v("Fixed remote filtering Select not showing dropdown in some conditions, #1531")]),a("li",[s._v("Fixed Slider sometimes drifting a small distance after releasing dragging, #1546")]),a("li",[s._v("Fixed Steps style in IE9, #1543")]),a("li",[s._v("Added Upload generating URL for all file types, #1530")]),a("li",[s._v("Fixed TimeSelect style, removed flexbox, #1335")])]),a("h3",{attrs:{id:"1-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.4")]),a("p",[a("em",[s._v("2016-12-02")])]),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("controls")]),s._v(" attribute for Input Number, #1473")]),a("li",[s._v("Fixed Checkbox Group and Radio Group async issue, #1511 #1514")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("offset")]),s._v(" attribute for Notification, #1419")]),a("li",[s._v("Fixed Slider's value not accurate issue when dragging rapidly, #1458")]),a("li",[s._v("Fixed Slider incorrectly showing multiple decimal digits issue, #1450")]),a("li",[s._v("Fixed Select's binding value and displayed value not in sync in some conditions")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("multiple-limit")]),s._v(" and "),a("code",{pre:!0},[s._v("allow-create")]),s._v(" attributes for Select")]),a("li",[s._v("Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438")]),a("li",[s._v("Fixed Tree's view not updating issue after fetching child nodes' data, #1439")]),a("li",[s._v("Fixed some Table's style issues in windows system, #1464 #1507")]),a("li",[s._v("Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("row-dblclick")]),s._v(" event for Table, #1362")])]),a("h3",{attrs:{id:"1-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),a("p",[a("em",[s._v("2016-11-28")])]),a("ul",[a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("currentPage")]),s._v(" of Pagination not working in some cases, #1336")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("month")]),s._v(" and "),a("code",{pre:!0},[s._v("disabledDate")]),s._v(" DatePicker's view not refreshing issue when switching year, #1158")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("readonly")]),s._v(" DatePicker clear button not disabled issue, #1238")]),a("li",[s._v("Fixed Slider not working when binding value is "),a("code",{pre:!0},[s._v("NaN")]),s._v(" or "),a("code",{pre:!0},[s._v("step")]),s._v(" is smaller than 1, #1239 #1282")]),a("li",[s._v("Added multi-header for Table, #1312")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("rowStyle")]),s._v(" for Table, #1348")]),a("li",[s._v("Fixed some attributes of TableColumn can not dynamically assigned issue, #1314")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("filter-node-method")]),s._v(" attribute and "),a("code",{pre:!0},[s._v("filter")]),s._v(" method for Tree, #1257")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("getCheckedKeys")]),s._v(" and "),a("code",{pre:!0},[s._v("setCheckedKeys")]),s._v(" methods for Tree, #1254")]),a("li",[s._v("Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152")]),a("li",[s._v("Fixed Popper not triggering destroy issue when keep-alive, #1359")]),a("li",[s._v("Added object deep validation for Form, #1363")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("append")]),s._v(" and "),a("code",{pre:!0},[s._v("prepend")]),s._v(" for Autocomplete, #1369")]),a("li",[s._v("Added dynamic "),a("code",{pre:!0},[s._v("pageSizes")]),s._v(" support for Pagination, #1372")]),a("li",[s._v("Added custom style API for checked buttons in Radio Button, #1380")]),a("li",[s._v("Added assigning title via slot for Menu Group, #1382")]),a("li",[s._v("Fixed DatePicker year switching bug, #1385")]),a("li",[s._v("Added uploaded file list API for Upload, #1393")]),a("li",[s._v("Added multi-type support for "),a("code",{pre:!0},[s._v("label")]),s._v(" attribute of Checkbox, #1400")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("setChecked")]),s._v(" method for Tree, #1422")])]),a("h3",{attrs:{id:"1-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),a("p",[a("em",[s._v("2016-11-18")])]),a("ul",[a("li",[s._v("Added "),a("code",{pre:!0},[s._v("context")]),s._v(" for Table to specify which context to access inside of table columns, #1161")]),a("li",[s._v("Added multiple languages")]),a("li",[s._v("Fixed language's dynamic switching issue, #1160")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("render-content")]),s._v(" for Alert, #568")]),a("li",[s._v("Added styles for focused Button, #982")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("change")]),s._v(" triggering timing in Switch, #1162")]),a("li",[s._v("Fixed TimeSelect being disabled when start time is set to "),a("code",{pre:!0},[s._v("00:00")]),s._v(", #676")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("show-header")]),s._v(" attribute and "),a("code",{pre:!0},[s._v("header-click")]),s._v(" method for Table, #1195")]),a("li",[s._v("Improved "),a("code",{pre:!0},[s._v("height")]),s._v(" attribute for Table when set to a string, #1195")]),a("li",[s._v("Fixed "),a("code",{pre:!0},[s._v("selection-change")]),s._v(" of Table not triggering in some cases, #1198")]),a("li",[s._v("Fixed Table's fixed columns not disappear when "),a("code",{pre:!0},[s._v("fixed")]),s._v(" attribute is dynamically changed, #1182")])]),a("h3",{attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("Fixed Pagination improperly triggering multiple "),a("code",{pre:!0},[s._v("current-change")]),s._v(" events")]),a("li",[s._v("Fixed Switch style when nested in a Form, #967")]),a("li",[s._v("Fixed Loading locks scroll of "),a("code",{pre:!0},[s._v("body")]),s._v(" in specific scenarios, #968")]),a("li",[a("code",{pre:!0},[s._v("span")]),s._v(" of Col is no longer a required attribute, and its default value is "),a("code",{pre:!0},[s._v("24")]),s._v(" if omitted")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("disabled")]),s._v(" and "),a("code",{pre:!0},[s._v("editable")]),s._v(" attribute for DatePicker, #976")]),a("li",[s._v("Fixed DatePicker readonly with native behavior, #976")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("close")]),s._v(" method for Message and Notification to manually close an instance")]),a("li",[s._v("Added clear value feature for DatePicker, #759")]),a("li",[s._v("Fixed Form reports an error when resetting a Date typed field, #937")]),a("li",[s._v("Fixed Table render error using vue-loader 9.9.0")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("align-center")]),s._v(" attribute for Step, #994")]),a("li",[s._v("Fixed Upload missing Progress component, #1013")]),a("li",[s._v("Layout now supports responsive layout")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("show-close")]),s._v(" for Dialog")]),a("li",[s._v("Fixed an error when "),a("code",{pre:!0},[s._v("vue-i18n")]),s._v(" is imported but not configured, #973")]),a("li",[s._v("Fixed DatePicker not refresh view with an initial value, #1050")]),a("li",[s._v("Fixed DiatePicker not refresh year when switched in month picker, #1070")]),a("li",[s._v("Added $loading service")]),a("li",[s._v("Added "),a("code",{pre:!0},[s._v("manual")]),s._v(" trigger in Popover")]),a("li",[s._v("Added props: "),a("code",{pre:!0},[s._v("nodeKey")]),s._v(", "),a("code",{pre:!0},[s._v("emptyText")]),s._v(", "),a("code",{pre:!0},[s._v("checkStrictly")]),s._v(", "),a("code",{pre:!0},[s._v("defaultExpandAll")]),s._v(", "),a("code",{pre:!0},[s._v("autoExpandParent")]),s._v(", "),a("code",{pre:!0},[s._v("defaultCheckedKeys")]),s._v(", "),a("code",{pre:!0},[s._v("defaultExpandedKeys")]),s._v(" and method: "),a("code",{pre:!0},[s._v("setCheckedNodes")]),s._v(" for Tree")])]),a("h3",{attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("ul",[a("li",[s._v("Element 1.0.0 released.")])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n Changelog\n ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},l=[],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){"use strict";function e(s){a(584)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(586),n=a.n(l),r=a(587),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(585);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("f3a1ce7a",e,!0)},function(s,t,a){t=s.exports=a(69)(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)}.page-component .page-component-up i{color:#409eff;display:block;line-height:40px;text-align:center;font-size:12px}.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 e(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s},n=a(70),r=e(n),v=a(49),_=e(v),c=a(33),i=e(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":l(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 e=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)])},l=[],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){"use strict";function e(s){a(589)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(591),n=a(0),r=e,v=n(null,l.a,!1,r,"data-v-4191270f",null);t.default=v.exports},function(s,t,a){var e=a(590);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("02601d3d",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".cards[data-v-4191270f]{margin:30px 0 70px}.card[data-v-4191270f]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-4191270f]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-4191270f]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-4191270f]{font-size:14px;color:#99a9bf}",""])},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",[e("h2",[s._v("Design Disciplines")]),e("el-row",{staticClass:"cards",attrs:{gutter:14}},[e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(522),alt:"Consistency"}}),e("h4",[s._v("Consistency")]),e("span")])]),e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(523),alt:"Feedback"}}),e("h4",[s._v("Feedback")]),e("span")])]),e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(524),alt:"Efficiency"}}),e("h4",[s._v("Efficiency")]),e("span")])]),e("el-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(525),alt:"Controllability"}}),e("h4",[s._v("Controllability")]),e("span")])])],1),e("h3",[s._v("Consistency")]),s._m(0),e("h3",[s._v("Feedback")]),s._m(1),e("h3",[s._v("Efficiency")]),s._m(2),e("h3",[s._v("Controllability")]),s._m(3)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Consistent with real life: ")]),s._v("in line with the process and logic of real life, and comply with languages and habits that the users are used to.")]),a("li",[a("strong",[s._v("Consistent within interface: ")]),s._v("all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Operation feedback: ")]),s._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),a("li",[a("strong",[s._v("Visual feedback: ")]),s._v("reflect current state by updating or rearranging elements of the page.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Simplify the process: ")]),s._v("keep operating process simple and intuitive.")]),a("li",[a("strong",[s._v("Definite and clear: ")]),s._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),a("li",[a("strong",[s._v("Easy to identify: ")]),s._v("the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Decision making: ")]),s._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),a("li",[a("strong",[s._v("Controlled consequences: ")]),s._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){"use strict";function e(s){a(593)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(595),n=a.n(l),r=a(596),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(594);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("32b80c51",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,'.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li strong{color:#5e6d82;font-weight:400}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}@media (max-width:768px){.page-guide .content{padding-left:0}}',""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}}},function(s,t,a){"use strict";var e=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)},l=[],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){"use strict";function e(s){a(598)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(600),n=a.n(l),r=a(601),v=a(0),_=e,c=v(n.a,r.a,!1,_,"data-v-3b0474de",null);t.default=c.exports},function(s,t,a){var e=a(599);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("21e784a6",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,'.cards .container[data-v-3b0474de]:after{clear:both}.cards .container[data-v-3b0474de]:after,.cards .container[data-v-3b0474de]:before{display:table;content:""}.actor[data-v-3b0474de]{min-height:65px}.actor[data-v-3b0474de]:after{content:"";width:6px;height:50px;vertical-align:-8px;margin-left:5px;background-color:#fff;display:inline-block;animation:blink-data-v-3b0474de .4s infinite alternate}.banner[data-v-3b0474de]{position:relative;height:420px;color:#fff;margin-bottom:130px}.banner .container[data-v-3b0474de]{position:relative}.banner img[data-v-3b0474de]{position:absolute;top:15px;right:-10px}.banner-sky[data-v-3b0474de]{position:absolute;top:-150px;bottom:-15px;width:100%;margin-top:-140px;-ms-transform:skewY(-5deg);transform:skewY(-5deg);-ms-transform-origin:center;transform-origin:center;background-image:linear-gradient(180deg,#0d1a44 13%,#3c4f91 56%,#5fc1e4)}img.banner-stars[data-v-3b0474de]{top:-10px;left:50%;-ms-transform:translateX(-50%);transform:translateX(-50%)}.banner-desc[data-v-3b0474de]{padding-top:110px;padding-left:30px;font-size:42px;position:relative;z-index:10}.banner-desc h2[data-v-3b0474de]{font-size:50px;margin:0;color:#fff}.banner-desc p[data-v-3b0474de]{font-size:14px;opacity:.8;width:420px;line-height:1.6;padding-left:3px}.cards[data-v-3b0474de]{margin:0 auto 110px;width:1140px}.cards .container[data-v-3b0474de]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-3b0474de]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-3b0474de]{width:160px;height:120px}.card[data-v-3b0474de]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-3b0474de]{margin:66px auto 60px}.card h3[data-v-3b0474de]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-3b0474de]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:1.6}.card a[data-v-3b0474de]{height:53px;line-height:52px;font-size:14px;color:#409eff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-3b0474de]:hover{color:#fff;background:#409eff}.card[data-v-3b0474de]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@keyframes blink-data-v-3b0474de{0%{opacity:0}to{opacity:1}}@media (max-width:1140px){.cards .container[data-v-3b0474de],.cards[data-v-3b0474de]{width:100%}.banner .container[data-v-3b0474de]{width:100%;box-sizing:border-box}.banner img[data-v-3b0474de]{right:0}}@media (max-width:1000px){.banner .container img[data-v-3b0474de]{display:none}}@media (max-width:768px){.cards li[data-v-3b0474de]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-3b0474de]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-3b0474de],.banner-stars[data-v-3b0474de]{display:none}.banner-desc h2[data-v-3b0474de]{font-size:32px}.banner-desc p[data-v-3b0474de]{width:auto}}',""])},function(s,t,a){"use strict";t.__esModule=!0;var e=a(526),l=function(s){return s&&s.__esModule?s:{default:s}}(e);t.default={mounted:function(){function s(t){t.addScene("product designers",1800,-17,800).addScene("UI designers",1800,-12,800).addScene("UX designers",1800,-12,800).addScene("product managers",1800,-16,800).addScene("FE developers",1800,-13,800).addScene(function(a){s(t),a()})}var t=(0,l.default)({maxSpeed:100});t.on("type:start, erase:start",function(){t.getCurrentActor().$element.classList.add("typing")}).on("type:end, erase:end",function(){t.getCurrentActor().$element.classList.remove("typing")}),t.addActor("line2",{speed:1,accuracy:1}).addScene(2600).addScene("line2:For ",500).addScene(function(a){s(t),a()})}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",[s._m(0),e("div",{staticClass:"cards"},[e("ul",{staticClass:"container"},[e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(528),alt:""}}),e("h3",[s._v("Guide")]),e("p",[s._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),e("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[s._v("View Detail\n ")])],1)]),e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(529),alt:""}}),e("h3",[s._v("Component")]),e("p",[s._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),e("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[s._v("View Detail\n ")])],1)]),e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:a(530),alt:""}}),e("h3",[s._v("Resource")]),e("p",[s._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),e("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[s._v("View Detail\n ")])],1)])])])])},l=[function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",{staticClass:"banner"},[e("div",{staticClass:"banner-sky"}),e("img",{staticClass:"banner-stars",attrs:{src:a(531),alt:"Element"}}),e("div",{staticClass:"container"},[e("div",{staticClass:"banner-desc"},[e("h2",[s._v("A Desktop UI Library")]),e("div",{staticClass:"actor",attrs:{id:"line2"}}),e("p",[s._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])]),e("img",{attrs:{src:a(532),alt:"Element"}})])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){"use strict";function e(s){a(603)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(605),n=a.n(l),r=a(606),v=a(0),_=e,c=v(n.a,r.a,!1,_,"data-v-77f359bc",null);t.default=c.exports},function(s,t,a){var e=a(604);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("694652b4",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,"h3[data-v-77f359bc]{margin-bottom:15px}.block[data-v-77f359bc]{margin-bottom:55px}p[data-v-77f359bc]{margin:0 0 15px}.nav-demos p[data-v-77f359bc]{margin-bottom:50px}.nav-demos h5[data-v-77f359bc]{margin:0}.nav-demos img[data-v-77f359bc]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-77f359bc]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-77f359bc]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-77f359bc]{display:block;width:100%}.mask[data-v-77f359bc]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-77f359bc],.zoom-leave-active[data-v-77f359bc]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-77f359bc],.zoom-leave-active[data-v-77f359bc]{-ms-transform:scale(.3);transform:scale(.3);opacity:0}.fade-enter-active[data-v-77f359bc],.fade-leave-active[data-v-77f359bc]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-77f359bc],.fade-leave-active[data-v-77f359bc]{opacity:0}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(s){document.body.style.overflow=s?"hidden":""}},methods:{enlarge:function(s,t){var a=t.target,e={},l=document;e.left=(l.body.scrollWidth-s)/2,e.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=s+"px",this.showDialog=!0}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",[e("h2",[s._v("Navigation")]),s._m(0),s._m(1),e("div",{staticClass:"block"},[e("h3",[s._v("Side Navigation")]),e("el-row",{attrs:{gutter:20}},[e("el-col",{attrs:{span:9}},[e("p",[s._v("Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.")])]),e("el-col",{staticClass:"nav-demos",attrs:{span:15}},[e("img",{attrs:{src:a(533),alt:"Level 1 categories"},on:{click:function(t){s.enlarge(846,t)}}}),e("h5",[s._v("Level 1 categories")]),e("p",[s._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),e("img",{attrs:{src:a(534),alt:"Level 2 categories"},on:{click:function(t){s.enlarge(846,t)}}}),e("h5",[s._v("Level 2 categories")]),e("p",[s._v("Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.")]),e("img",{attrs:{src:a(535),alt:"Level 3 categories"},on:{click:function(t){s.enlarge(846,t)}}}),e("h5",[s._v("Level 3 categories")]),e("p",[s._v("Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.")])])],1)],1),e("div",{staticClass:"block"},[e("h3",[s._v("Top Navigation")]),e("el-row",[e("el-col",{attrs:{span:10}},[e("p",[s._v("Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.")])]),e("el-col",{staticClass:"nav-demos",attrs:{span:14}},[e("img",{attrs:{src:a(536),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),e("p",[s._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),e("transition",{attrs:{name:"fade"}},[e("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),e("transition",{attrs:{name:"zoom"}},[e("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[e("div",{staticClass:"imgWrap",style:s.imgStyle},[e("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._v("Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("Choose the right navigation")]),a("p",[s._v("An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation")])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){"use strict";function e(s){a(608)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(610),n=a(0),r=e,v=n(null,l.a,!1,r,"data-v-3b0011c2",null);t.default=v.exports},function(s,t,a){var e=a(609);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("3be909bb",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,'.cards .container[data-v-3b0011c2]:after{clear:both}.cards .container[data-v-3b0011c2]:after,.cards .container[data-v-3b0011c2]:before{display:table;content:""}.page-resource[data-v-3b0011c2]{padding-top:55px;box-sizing:border-box}.cards[data-v-3b0011c2]{margin:35px auto 110px}.cards .container[data-v-3b0011c2]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-3b0011c2]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-3b0011c2]{font-size:28px;margin:0}p[data-v-3b0011c2]{font-size:14px;color:#5e6d82}.card[data-v-3b0011c2]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-3b0011c2]{margin:75px auto 35px;height:87px}.card h3[data-v-3b0011c2]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-3b0011c2]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.6}.card a[data-v-3b0011c2]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#409eff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-3b0011c2]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-3b0011c2]{height:auto;padding-bottom:20px}.cards h3[data-v-3b0011c2]{height:auto}}',""])},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-resource"},[a("h2",[s._v("Resource")]),a("p",[s._v("Under construction.")])])}],n={render:e,staticRenderFns:l};t.a=n},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){s.exports=a(879)},function(s,t,a){"use strict";function e(s){a(880)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(882),n=a.n(l),r=a(883),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(881);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("7fc45351",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays important alert messages.")]),s._m(1),a("p",[s._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success"}}),a("el-alert",{attrs:{title:"info alert",type:"info"}}),a("el-alert",{attrs:{title:"warning alert",type:"warning"}}),a("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),a("p",[s._v("Alert provides 4 types of themes defined by "),a("code",[s._v("type")]),s._v(", whose default value is "),a("code",[s._v("info")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Customize the close button as texts or other symbols.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n hello() {\n alert('Hello World!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),a("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),a("code",[s._v("closable")]),s._v(" attribute decides if the component can be closed or not. It accepts "),a("code",[s._v("boolean")]),s._v(", and the default is "),a("code",[s._v("true")]),s._v(". You can set "),a("code",[s._v("close-text")]),s._v(" attribute to replace the default cross symbol as the close button. Be careful that "),a("code",[s._v("close-text")]),s._v(" must be a string. "),a("code",[s._v("close")]),s._v(" event fires when the component is closed.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"unclosable alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":closable")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"customized close-text"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("close-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Gotcha"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"alert with callback"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"hello"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n hello() {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Hello World!'")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displaying an icon improves readability.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2),a("p",[s._v("Setting the "),a("code",[s._v("show-icon")]),s._v(" attribute displays an icon that corresponds with the current Alert type.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Description includes a message with more detailed information.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2),a("p",[s._v("Besides the required "),a("code",[s._v("title")]),s._v(" attribute, you can add a "),a("code",[s._v("description")]),s._v(" attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"with description"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"This is a description."')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2),a("p",[s._v("At last, this is an example with both icon and description.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-alert")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error alert"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"error"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"more text description"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable-close-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable close button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"centered-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use the "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute to center the text.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon-and-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon and description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("title "),a("strong",[s._v("REQUIRED")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("component type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("descriptive text. Can also be passed with the default slot")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("if closable or not")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to center the text")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("customized close button text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("if a type icon is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("fires when alert is closed")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(885)},function(s,t,a){"use strict";function e(s){a(886)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(888),n=a(0),r=e,v=n(null,l.a,!1,r,"data-v-9f226bfc",null);t.default=v.exports},function(s,t,a){var e=a(887);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("3c224cee",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,'.clearfix[data-v-9f226bfc]:after{clear:both}.share-button[data-v-9f226bfc]{width:36px;padding:10px}.mark[data-v-9f226bfc]{margin-top:8px;line-height:1;float:right}.clearfix[data-v-9f226bfc]:after,.clearfix[data-v-9f226bfc]:before{display:table;content:""}.item[data-v-9f226bfc]{margin-right:40px}',""])},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A number or status mark on buttons and icons.")]),s._m(1),a("p",[s._v("Displays the amount of new messages.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n \n Click Me\n \n \n \n comments\n \n \n \n replies\n \n \n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n comments\n "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n replies\n "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("The amount is defined with "),a("code",[s._v("value")]),s._v(" which accepts "),a("code",[s._v("Number")]),s._v(" or "),a("code",[s._v("String")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Click Me"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n comments\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" />")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n replies\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(" />")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n"),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize the max value.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("The max value is defined by property "),a("code",[s._v("max")]),s._v(" which is a "),a("code",[s._v("Number")]),s._v(". Note that it only works when "),a("code",[s._v("value")]),s._v(" is also a "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"99"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n"),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displays text content other than numbers.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("When "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("String")]),s._v(", it can display customized text.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"new"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"hot"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n"),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Use a red dot to mark content that needs to be noticed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'query\n\n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("query")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("is-dot")]),s._v(". It is a "),a("code",[s._v("Boolean")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("query"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-badge")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("is-dot")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"share-button"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n"),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"max-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" Max value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"little-red-dot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Little red dot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("display value")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value, shows '{max}+' when exceeded. Only works if "),a("code",{pre:!0},[s._v("value")]),s._v(" is a "),a("code",{pre:!0},[s._v("Number")])]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("if a little dot is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("hidden badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(890)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(891),l=a(0),n=l(null,e.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays the location of the current page, making it easier to browser back.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n homepage\n promotion management\n promotion list\n promotion detail\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),a("el-breadcrumb-item",[s._v("promotion management")]),a("el-breadcrumb-item",[s._v("promotion list")]),a("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),a("p",[s._v("In "),a("code",[s._v("el-breadcrumb")]),s._v(", each "),a("code",[s._v("el-breadcrumb-item")]),s._v(" is a tag that stands for every level starting from homepage. This component has a "),a("code",[s._v("String")]),s._v(" attribute "),a("code",[s._v("separator")]),s._v(", and it determines the separator. Its default value is '/'.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"/"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":to")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n homepage\n promotion management\n promotion list\n promotion detail\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),a("el-breadcrumb-item",[s._v("promotion management")]),a("el-breadcrumb-item",[s._v("promotion list")]),a("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("separator-class")]),s._v(" to use "),a("code",[s._v("iconfont")]),s._v(" as the separator，it will cover "),a("code",[s._v("separator")])]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("separator-class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-right"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":to")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icon-separator"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-separator","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon separator")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("separator character")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("/")])]),a("tr",[a("td",[s._v("separator-class")]),a("td",[s._v("iconfont-separator's 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("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("target route of the link, same as "),a("code",{pre:!0},[s._v("to")]),s._v(" of "),a("code",{pre:!0},[s._v("vue-router")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("if "),a("code",{pre:!0},[s._v("true")]),s._v(", the navigation will not leave a history record")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(893)},function(s,t,a){"use strict";function e(s){a(894)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(896),n=a(0),r=e,v=n(null,l.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var e=a(895);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("58068286",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Commonly used button.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Plain\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Round\n Primary\n Success\n Info\n Warning\n Danger\n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-button",[s._v("Default")]),a("el-button",{attrs:{type:"primary"}},[s._v("Primary")]),a("el-button",{attrs:{type:"success"}},[s._v("Success")]),a("el-button",{attrs:{type:"info"}},[s._v("Info")]),a("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger"}},[s._v("Danger")])],1),a("div",{staticStyle:{margin:"20px 0"}},[a("el-button",{attrs:{plain:""}},[s._v("Plain")]),a("el-button",{attrs:{type:"primary",plain:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",plain:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",plain:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",plain:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",plain:""}},[s._v("Danger")])],1),a("div",[a("el-button",{attrs:{round:""}},[s._v("Round")]),a("el-button",{attrs:{type:"primary",round:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",round:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",round:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",round:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",round:""}},[s._v("Danger")])],1)]),a("p",[s._v("Use "),a("code",[s._v("type")]),s._v(", "),a("code",[s._v("plain")]),s._v(" and "),a("code",[s._v("round")]),s._v(" to define Button's style.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Primary"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 20px 0"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Plain"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Primary"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(">")]),s._v("Danger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Round"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Primary"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Danger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Plain\n Primary\n Success\n Info\n Warning\n Danger\n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-button",{attrs:{disabled:""}},[s._v("Default")]),a("el-button",{attrs:{type:"primary",disabled:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",disabled:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",disabled:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",disabled:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",disabled:""}},[s._v("Danger")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{attrs:{plain:"",disabled:""}},[s._v("Plain")]),a("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",plain:"",disabled:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",plain:"",disabled:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[s._v("Danger")])],1)]),a("p",[s._v("Use "),a("code",[s._v("disabled")]),s._v(" attribute to determine whether a button is disabled. It accepts a "),a("code",[s._v("Boolean")]),s._v(" value.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Primary"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Danger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Plain"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Primary"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Info"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Danger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Buttons without border and background.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Text Button\nText Button\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"}},[s._v("Text Button")]),a("el-button",{attrs:{type:"text",disabled:""}},[s._v("Text Button")])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("Text Button"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\nUpload\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[s._v("Search")]),a("el-button",{attrs:{type:"primary"}},[s._v("Upload"),a("i",{staticClass:"el-icon-upload el-icon-right"})])],1),a("p",[s._v("Use the "),a("code",[s._v("icon")]),s._v(" attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an "),a("code",[s._v("")]),s._v(" tag. Custom icons can be used as well.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),s._v("Search"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Displayed as a button group, can be used to group a series of similar operations.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Previous Page\n Next Page\n\n\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[s._v("Previous Page")]),a("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),a("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1),a("p",[s._v("Use tag "),a("code",[s._v("")]),s._v(" to group your buttons.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-left"')]),s._v(">")]),s._v("Previous Page"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Next Page"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-right el-icon-right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Click the button to load data, then the button displays a loading state.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Loading\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"primary",loading:!0}},[s._v("Loading")])],1),a("p",[s._v("Set "),a("code",[s._v("loading")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to display loading state.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":loading")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("Loading"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Medium\n Small\n Mini\n
    \n
    \n Default\n Medium\n Small\n Mini\n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-button",[s._v("Default")]),a("el-button",{attrs:{size:"medium"}},[s._v("Medium")]),a("el-button",{attrs:{size:"small"}},[s._v("Small")]),a("el-button",{attrs:{size:"mini"}},[s._v("Mini")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{attrs:{round:""}},[s._v("Default")]),a("el-button",{attrs:{size:"medium",round:""}},[s._v("Medium")]),a("el-button",{attrs:{size:"small",round:""}},[s._v("Small")]),a("el-button",{attrs:{size:"mini",round:""}},[s._v("Mini")])],1)]),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("medium")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Medium"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Small"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("Mini"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Medium"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Small"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("round")]),s._v(">")]),s._v("Mini"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute determines if the button is disabled.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"text-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Text Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icon-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button Group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("button size")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("button type")]),a("td",[s._v("string")]),a("td",[s._v("primary / success / warning / danger / info / text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("determine whether it's a plain button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("round")]),a("td",[s._v("determine whether it's a round button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("determine whether it's loading")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("disable the button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon class name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as native button's "),a("code",{pre:!0},[s._v("autofocus")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("same as native button's "),a("code",{pre:!0},[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("button / submit / reset")]),a("td",[s._v("button")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(898)},function(s,t,a){"use strict";function e(s){a(899)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(901),n=a.n(l),r=a(902),v=a(0),_=e,c=v(n.a,r.a,!1,_,"data-v-018beaf5",null);t.default=c.exports},function(s,t,a){var e=a(900);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("949dfec2",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,'.clearfix[data-v-018beaf5]:after{clear:both}.clearfix[data-v-018beaf5]:after,.clearfix[data-v-018beaf5]:before{display:table;content:""}.text[data-v-018beaf5]{font-size:14px}.time[data-v-018beaf5]{font-size:13px;color:#999}.bottom[data-v-018beaf5]{margin-top:13px;line-height:12px}.item[data-v-018beaf5]{margin-bottom:18px}.button[data-v-018beaf5]{padding:0;float:right}.image[data-v-018beaf5]{width:100%;display:block}.box-card[data-v-018beaf5]{width:480px}',""])},function(s,t,a){"use strict";t.__esModule=!0;var e=a(71),l=function(s){return s&&s.__esModule?s:{default:s}}(e);t.default={data:function(){return{currentDate:l.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("section",[s._m(0),e("p",[s._v("Integrate information in a card container.")]),s._m(1),e("p",[s._v("Card includes title, content and operations.")]),e("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n Card name\n Operation button\n
    \n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,style:'\n .text {\n font-size: 14px;\n }\n\n .item {\n margin-bottom: 18px;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n .clearfix:after {\n clear: both\n }\n\n .box-card {\n width: 480px;\n }\n'}}},[e("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[e("el-card",{staticClass:"box-card"},[e("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[e("span",[s._v("Card name")]),e("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[s._v("Operation button")])],1),s._l(4,function(t){return e("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("List item "+t)+"\n ")])})],2)],1),e("p",[s._v("Card is made up of "),e("code",[s._v("header")]),s._v(" and "),e("code",[s._v("body")]),s._v(". "),e("code",[s._v("header")]),s._v(" is optional, and its content distribution depends on a named slot.")]),e("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[e("pre",{pre:!0},[e("code",{attrs:{class:"hljs language-html"}},[e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"header"')]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"clearfix"')]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Card name"),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"float: right; padding: 3px 0"')]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(">")]),s._v("Operation button"),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"o in 4"')]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"text item"')]),s._v(">")]),s._v("\n {{'List item ' + o }}\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),e("span",{attrs:{class:"css"}},[s._v("\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".text")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n }\n\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n }\n\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":before")]),s._v(",\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": table;\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v('""')]),s._v(";\n }\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("clear")]),s._v(": both\n }\n\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".box-card")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("480px")]),s._v(";\n }\n")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),e("p",[s._v("The header part can be omitted.")]),e("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,style:"\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .box-card {\n width: 480px;\n }\n"}}},[e("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[e("el-card",{staticClass:"box-card"},s._l(4,function(t){return e("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("List item "+t)+"\n ")])}))],1),e("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[e("pre",{pre:!0},[e("code",{attrs:{class:"hljs language-html"}},[e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"o in 4"')]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"text item"')]),s._v(">")]),s._v("\n {{'List item ' + o }}\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),e("span",{attrs:{class:"css"}},[s._v("\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".text")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n }\n\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".item")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(" "),e("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".box-card")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("480px")]),s._v(";\n }\n")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),e("p",[s._v("Display richer content by adding some configs.")]),e("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n
    \n Yummy hamburger\n
    \n \n Operating button\n
    \n
    \n     \n     \n    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n currentDate: new Date()\n };\n }\n}\n",style:'\n .time {\n font-size: 13px;\n color: #999;\n }\n \n .bottom {\n margin-top: 13px;\n line-height: 12px;\n }\n\n .button {\n padding: 0;\n float: right;\n }\n\n .image {\n width: 100%;\n display: block;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n \n .clearfix:after {\n clear: both\n }\n'}}},[e("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[e("el-row",s._l(2,function(t,l){return e("el-col",{key:t,attrs:{span:8,offset:l>0?2:0}},[e("el-card",{attrs:{"body-style":{padding:"0px"}}},[e("img",{staticClass:"image",attrs:{src:a(537)}}),e("div",{staticStyle:{padding:"14px"}},[e("span",[s._v("Yummy hamburger")]),e("div",{staticClass:"bottom clearfix"},[e("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),e("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("Operating button")])],1)])])],1)}))],1),e("p",[s._v("The "),e("code",[s._v("body-style")]),s._v(" attribute defines CSS style of custom "),e("code",[s._v("body")]),s._v(". This example also uses "),e("code",[s._v("el-col")]),s._v(" for layout.")]),e("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[e("pre",{pre:!0},[e("code",{attrs:{class:"hljs language-html"}},[e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"(o, index) in 2"')]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"o"')]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("el-card")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v(":body-style")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"image"')]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Yummy hamburger"),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("time")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"time"')]),s._v(">")]),s._v("{{ currentDate }}"),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"button"')]),s._v(">")]),s._v("Operating button"),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),e("span",{attrs:{class:"css"}},[s._v("\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".time")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("13px")]),s._v(";\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("#999")]),s._v(";\n }\n \n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bottom")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-top")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("13px")]),s._v(";\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".button")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("float")]),s._v(": right;\n }\n\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".image")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),e("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v(";\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n }\n\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":before")]),s._v(",\n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": table;\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v('""')]),s._v(";\n }\n \n "),e("span",{attrs:{class:"hljs-selector-class"}},[s._v(".clearfix")]),e("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":after")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attribute"}},[s._v("clear")]),s._v(": both\n }\n")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),e("span",{attrs:{class:"javascript"}},[s._v("\n"),e("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),e("span",{attrs:{class:"hljs-attr"}},[s._v("currentDate")]),s._v(": "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("()\n };\n }\n}\n")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"simple-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-images"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[s._v("¶")]),s._v(" With images")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("Title of the card. Also accepts a DOM passed by "),a("code",{pre:!0},[s._v("slot#header")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("CSS style of body")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(904)},function(s,t,a){"use strict";function e(s){a(905)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(907),n=a.n(l),r=a(908),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(906);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("50d11a94",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Loop a series of images or texts in a limited space")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 150px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is hovered (default)")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is clicked")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("Combine "),a("code",[s._v("el-carousel")]),s._v(" with "),a("code",[s._v("el-carousel-item")]),s._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside "),a("code",[s._v("el-carousel-item")]),s._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),a("code",[s._v("trigger")]),s._v(" to "),a("code",[s._v("click")]),s._v(", and the carousel switches only when an indicator is clicked.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is hovered (default)"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is clicked"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("150px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Indicators can be displayed outside the carousel")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("indicator-position")]),s._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("outside")]),s._v(" moves them outside; setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("none")]),s._v(" hides the indicators.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("indicator-position")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"outside"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("300px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can define when arrows are displayed")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("arrow")]),s._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),a("code",[s._v("arrow")]),s._v(" to "),a("code",[s._v("always")]),s._v(" or "),a("code",[s._v("never")]),s._v(" shows/hides the arrows permanently.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":interval")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"5000"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("arrow")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"always"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in 4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("18px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("300px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When a page is wide enough but has limited height, you can activate card mode for carousels")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 200px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("Setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._v(" activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":interval")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4000"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-carousel-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in 6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h3")]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("h3")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#475669")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.75")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-carousel__item")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indicators"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indicators")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arrows"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arrows")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the carousel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("index of the initially active slide (starting from 0)")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how indicators are triggered")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("whether automatically loop the slides")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("interval of the auto loop, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("position of the indicators")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("when arrows are shown")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the Carousel")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the active slide switches")]),a("td",[s._v("index of the new active slide, index of the old active slide")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("manually switch slide")]),a("td",[s._v("index of the slide to be switched to, starting from 0; or the "),a("code",{pre:!0},[s._v("name")]),s._v(" of corresponding "),a("code",{pre:!0},[s._v("el-carousel-item")])])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("switch to the previous slide")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("switch to the next slide")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("name of the item, can be used in "),a("code",{pre:!0},[s._v("setActiveItem")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("text content for the corresponding indicator")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(910)},function(s,t,a){"use strict";function e(s){a(911)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(913),n=a.n(l),r=a(914),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(912);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("6c518f03",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;display:inline-block;width:50%;box-sizing:border-box}.demo-cascader .block:last-child{border-right:none}.demo-cascader .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"},options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["component","data","tag"]}},created:function(){this.optionsWithDisabled=JSON.parse(JSON.stringify(this.options)),this.optionsWithDisabled[0].disabled=!0},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[s.length-1].style.padding="0"})},methods:{handleItemChange:function(s){var t=this;console.log("active item:",s),setTimeout(function(a){s.indexOf("California")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"Los Angeles"}]:s.indexOf("Florida")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"Orlando"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),s._m(1),a("p",[s._v("There are two ways to expand child option items.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Child options expand when clicked (default)\n \n \n
    \n
    \n Child options expand when hovered\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions: [],\n selectedOptions2: []\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when clicked (default)")]),a("el-cascader",{attrs:{options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions,callback:function(t){s.selectedOptions=t},expression:"selectedOptions"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when hovered")]),a("el-cascader",{attrs:{"expand-trigger":"hover",options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions2,callback:function(t){s.selectedOptions2=t},expression:"selectedOptions2"}})],1)]),a("p",[s._v("Assigning the "),a("code",[s._v("options")]),s._v(" attribute to an array of options renders a Cascader. The "),a("code",[s._v("expand-trigger")]),s._v(" attribute defines how child options are expanded. This example also demonstrates the "),a("code",[s._v("change")]),s._v(" event, whose parameter is the value of Cascader, an array made up of the values of each selected level.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when clicked (default)"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedOptions"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when hovered"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("expand-trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedOptions2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedOptions")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedOptions2")]),s._v(": []\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n optionsWithDisabled: [{\n value: 'guide',\n label: 'Guide',\n disabled: true,\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),a("p",[s._v("In this example, the first item in "),a("code",[s._v("options")]),s._v(" array has a "),a("code",[s._v("disabled: true")]),s._v(" field, so it is disabled. By default, Cascader checks the "),a("code",[s._v("disabled")]),s._v(" field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the "),a("code",[s._v("props")]),s._v(" attribute (see the API table below for details). And of course, field name "),a("code",[s._v("value")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("children")]),s._v(" can also be customized in the same way.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("optionsWithDisabled")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("The input can display only the last level instead of all levels.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("The "),a("code",[s._v("show-all-levels")]),s._v(" attribute defines if all levels are displayed. If it is "),a("code",[s._v("false")]),s._v(", only the last level is displayed.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":show-all-levels")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions3: ['component', 'data', 'tag']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(t){s.selectedOptions3=t},expression:"selectedOptions3"}})],1),a("p",[s._v("The default value can be defined with an array.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedOptions3")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v("]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Parent options can also be selected.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),a("p",[s._v("By default only the options in the last level can be selected. By assigning "),a("code",[s._v("change-on-select")]),s._v(" to "),a("code",[s._v("true")]),s._v(", options in parent levels can also be selected.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("change-on-select")]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Load child options when their parent option is clicked or hovered over.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n label: 'California',\n cities: []\n }, {\n label: 'Florida',\n cities: []\n }],\n props: {\n value: 'label',\n children: 'cities'\n }\n };\n },\n\n methods: {\n handleItemChange(val) {\n console.log('active item:', val);\n setTimeout(_ => {\n if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n this.options2[0].cities = [{\n label: 'Los Angeles'\n }];\n } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n this.options2[1].cities = [{\n label: 'Orlando'\n }];\n }\n }, 300);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),a("p",[s._v("In this example, the options array does not have data of cities when initialized. With the "),a("code",[s._v("active-item-change")]),s._v(" event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how "),a("code",[s._v("props")]),s._v(" is used.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@active-item-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleItemChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": []\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": []\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cities'")]),s._v("\n }\n };\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleItemChange(val) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'active item:'")]),s._v(", val);\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (val.indexOf("),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(") > "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(" && !"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].cities.length) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("].cities = [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v("\n }];\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (val.indexOf("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(") > "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(" && !"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("].cities.length) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options2["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("].cities = [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Orlando'")]),s._v("\n }];\n }\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("300")]),s._v(");\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Search and select options with a keyword.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Only options of the last level can be selected\n \n
    \n
    \n Options of all levels can be selected\n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Only options of the last level can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:""}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Options of all levels can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:"","change-on-select":""}})],1)]),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-cascader")]),s._v(" enables filtering")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Only options of the last level can be selected"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Try searching: Guide"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Options of all levels can be selected"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-cascader")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Try searching: Guide"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("change-on-select")]),s._v("\n >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guide'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'consistency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'feedback'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'efficiency'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'controllability'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'side nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top nav'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Component'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Basic'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'layout'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'typography'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'icon'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'radio'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkbox'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'input-number'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'select'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cascader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'switch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'slider'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'time-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'upload'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rate'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'form'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Data'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'table'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tag'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'progress'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tree'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'pagination'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'badge'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notice'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'message-box'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'notification'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Navigation'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'menu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tabs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dropdown'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'steps'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Others'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'tooltip'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'popover'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'card'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'carousel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'collapse'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Resource'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'axure'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'sketch'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'docs'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Disable an option by setting a "),a("code",{pre:!0},[s._v("disabled")]),s._v(" field in the option object.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"display-only-the-last-level"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[s._v("¶")]),s._v(" Display only the last level")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-default-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-default-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" With default value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"change-on-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Change on select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dynamically-load-child-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dynamically-load-child-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dynamically load child options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("options")]),a("td",[s._v("data of the options")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("selected value")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Cascader's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("input placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Cascader is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether selected value can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-trigger")]),a("td",[s._v("trigger mode of expanding current item")]),a("td",[s._v("string")]),a("td",[s._v("click / hover")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("show-all-levels")]),a("td",[s._v("whether to display all levels of the selected value in the input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether the options can be searched")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing filter keyword, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("whether selecting an option of any level is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of option object is used as the option's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("specify which key of option object is used as the option's value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which key of option object is used as the option's child options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of option object indicates if the option is disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-filter")]),a("td",[s._v("hook function before filtering with the value to be filtered as its parameter. If "),a("code",{pre:!0},[s._v("false")]),s._v(" is returned or a "),a("code",{pre:!0},[s._v("Promise")]),s._v(" is returned and then is rejected, filtering will be aborted")]),a("td",[s._v("function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("active-item-change")]),a("td",[s._v("triggers when active option changes, only works when "),a("code",{pre:!0},[s._v("change-on-select")]),s._v(" is "),a("code",{pre:!0},[s._v("false")])]),a("td",[s._v("an array of active options")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(916)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(917),l=a.n(e),n=a(918),r=a(0),v=r(l.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";var e=["Shanghai","Beijing","Guangzhou","Shenzhen"];s.exports={data:function(){return{checkList:["selected and disabled","Option A"],checked:!0,checked1:!1,checked2:!0,checked3:!0,checked4:!1,checked5:!1,checked6:!0,isValid:"valid",checkAll:!1,cities:e,checkedCities:["Shanghai","Beijing"],checkedCities1:["Shanghai","Beijing"],isIndeterminate:!0,checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],checkboxGroup5:[],checkboxGroup6:[]}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s?e:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){var t=s.length;this.checkAll=t===this.cities.length,this.isIndeterminate=t>0&&t\n \x3c!-- `checked` should be true or false --\x3e\n Option\n\n\n',script:"\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{model:{value:s.checked,callback:function(t){s.checked=t},expression:"checked"}},[s._v("Option")])]],2),a("p",[s._v("Define "),a("code",[s._v("v-model")]),s._v("(bind variable) in "),a("code",[s._v("el-checkbox")]),s._v(". The default value is a "),a("code",[s._v("Boolean")]),s._v(" for single "),a("code",[s._v("checkbox")]),s._v(", and it becomes "),a("code",[s._v("true")]),s._v(" when selected. Content inside the "),a("code",[s._v("el-checkbox")]),s._v(" tag will become the description following the button of the checkbox.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- `checked` should be true or false --\x3e")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked"')]),s._v(">")]),s._v("Option"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Disabled state for checkbox.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(t){s.checked1=t},expression:"checked1"}},[s._v("Option")]),a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(t){s.checked2=t},expression:"checked2"}},[s._v("Option")])]],2),a("p",[s._v("Set the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked1")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n checkList: ['selected and disabled','Option A']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox-group",{model:{value:s.checkList,callback:function(t){s.checkList=t},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"Option A"}}),a("el-checkbox",{attrs:{label:"Option B"}}),a("el-checkbox",{attrs:{label:"Option C"}}),a("el-checkbox",{attrs:{label:"disabled",disabled:""}}),a("el-checkbox",{attrs:{label:"selected and disabled",disabled:""}})],1)]],2),a("p",[a("code",[s._v("checkbox-group")]),s._v(" element can manage multiple checkboxes in one group by using "),a("code",[s._v("v-model")]),s._v(" which is bound as an "),a("code",[s._v("Array")]),s._v(". Inside the "),a("code",[s._v("el-checkbox")]),s._v(" element, "),a("code",[s._v("label")]),s._v(" is the value of the checkbox. If no content is nested in that tag, "),a("code",[s._v("label")]),s._v(" will be rendered as the description following the button of the checkbox. "),a("code",[s._v("label")]),s._v(" also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkList"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option A"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option B"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option C"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selected and disabled"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkList")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'selected and disabled'")]),s._v(","),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option A'")]),s._v("]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkAll: true,\n checkedCities: ['Shanghai', 'Beijing'],\n cities: cityOptions,\n isIndeterminate: true\n };\n },\n methods: {\n handleCheckAllChange(event) {\n this.checkedCities = event.target.checked ? cityOptions : [];\n this.isIndeterminate = false;\n },\n handleCheckedCitiesChange(value) {\n let checkedCount = value.length;\n this.checkAll = checkedCount === this.cities.length;\n this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox",{attrs:{indeterminate:s.isIndeterminate},on:{change:s.handleCheckAllChange},model:{value:s.checkAll,callback:function(t){s.checkAll=t},expression:"checkAll"}},[s._v("Check all")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{on:{change:s.handleCheckedCitiesChange},model:{value:s.checkedCities,callback:function(t){s.checkedCities=t},expression:"checkedCities"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":indeterminate")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkAll"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("Check all"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkedCities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkAll")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkedCities")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("isIndeterminate")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCheckAllChange(event) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".checkedCities = event.target.checked ? cityOptions : [];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n },\n handleCheckedCitiesChange(value) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" checkedCount = value.length;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cities.length;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(" && checkedCount < "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cities.length;\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkedCities1: ['Shanghai', 'Beijing'],\n cities: cityOptions\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:s.checkedCities1,callback:function(t){s.checkedCities1=t},expression:"checkedCities1"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" \n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkedCities1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkedCities1")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Checkbox with button styles.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n export default {\n data () {\n return {\n checkboxGroup1: ['Shanghai'],\n checkboxGroup2: ['Shanghai'],\n checkboxGroup3: ['Shanghai'],\n checkboxGroup4: ['Shanghai'],\n cities: cityOptions\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(t){s.checkboxGroup1=t},expression:"checkboxGroup1"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"medium"},model:{value:s.checkboxGroup2,callback:function(t){s.checkboxGroup2=t},expression:"checkboxGroup2"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup3,callback:function(t){s.checkboxGroup3=t},expression:"checkboxGroup3"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t,disabled:"Beijing"===t}},[s._v(s._s(t))])}))],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup4,callback:function(t){s.checkboxGroup4=t},expression:"checkboxGroup4"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))],1)]],2),a("p",[s._v("You just need to change "),a("code",[s._v("el-checkbox")]),s._v(" element into "),a("code",[s._v("el-checkbox-button")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"city === 'Beijing'\"")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city in cities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v(">")]),s._v("{{city}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" cityOptions = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("];\n\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup1")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup2")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup3")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup4")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": cityOptions\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n checked3: true,\n checked4: false,\n checked5: false,\n checked6: true,\n checkboxGroup5: [],\n checkboxGroup6: []\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-checkbox",{attrs:{label:"Option1",border:""},model:{value:s.checked3,callback:function(t){s.checked3=t},expression:"checked3"}}),a("el-checkbox",{attrs:{label:"Option2",border:""},model:{value:s.checked4,callback:function(t){s.checked4=t},expression:"checked4"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox",{attrs:{label:"Option1",border:"",size:"medium"},model:{value:s.checked5,callback:function(t){s.checked5=t},expression:"checked5"}}),a("el-checkbox",{attrs:{label:"Option2",border:"",size:"medium"},model:{value:s.checked6,callback:function(t){s.checked6=t},expression:"checked6"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup5,callback:function(t){s.checkboxGroup5=t},expression:"checkboxGroup5"}},[a("el-checkbox",{attrs:{label:"Option1",border:""}}),a("el-checkbox",{attrs:{label:"Option2",border:"",disabled:""}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup6,callback:function(t){s.checkboxGroup6=t},expression:"checkboxGroup6"}},[a("el-checkbox",{attrs:{label:"Option1",border:""}}),a("el-checkbox",{attrs:{label:"Option2",border:""}})],1)],1)]],2),a("p",[s._v("The "),a("code",[s._v("border")]),s._v(" attribute adds a border to Checkboxes.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked5"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checked6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup5"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkboxGroup6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Option2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked3")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked4")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked5")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checked6")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup5")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkboxGroup6")]),s._v(": []\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-state"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled State")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indeterminate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",{pre:!0},[s._v("indeterminate")]),s._v(" property can help you to achieve a 'check all' effect.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"minimum-maximum-items-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Minimum / Maximum items checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",{pre:!0},[s._v("min")]),s._v(" and "),a("code",{pre:!0},[s._v("max")]),s._v(" properties can help you to limit the number of checked items.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-borders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[s._v("¶")]),s._v(" With borders")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("value of the Checkbox when used inside a "),a("code",{pre:!0},[s._v("checkbox-group")])]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("value of the Checkbox if it's checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("value of the Checkbox if it's not checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the Checkbox is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether to add a border around Checkbox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the Checkbox, only works when "),a("code",{pre:!0},[s._v("border")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("if the Checkbox is checked")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("indeterminate")]),s._v(" in native checkbox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("the updated value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of checkbox buttons or bordered checkboxes")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the nesting checkboxes are disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("the updated value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("value of the checkbox when used inside a "),a("code",{pre:!0},[s._v("checkbox-group")])]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("value of the checkbox if it's checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("value of the checkbox if it's not checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the checkbox is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("if the checkbox is checked")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(920)},function(s,t,a){"use strict";function e(s){a(921)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(923),n=a.n(l),r=a(924),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(922);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("596f2e90",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Collapse to store contents.")]),s._m(1),a("p",[s._v("You can expand multiple panels")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeNames: ['1']\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(t){s.activeNames=t},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"activeNames"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Consistency"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeNames")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("]\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In accordion mode, only one panel can be expanded at once")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeName: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("p",[s._v("Activate accordion mode using the "),a("code",[s._v("accordion")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"activeName"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Consistency"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n
    Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("\n Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n Consistency"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"header-icon el-icon-information"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Feedback"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Efficiency"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Controllability"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom title")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Besides using the "),a("code",{pre:!0},[s._v("title")]),s._v(" attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether to activate accordion mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("currently active panel")]),a("td",[s._v("string (accordion mode)/array (non-accordion mode)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when active panels change")]),a("td",[s._v("activeNames: array (non-accordion mode)/string (accordion mode)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("unique identification of the panel")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the panel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(926)},function(s,t,a){"use strict";function e(s){a(927)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(929),n=a.n(l),r=a(930),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(928);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("383af4cc",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("ColorPicker is a color selector supporting multiple color formats.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n With default value\n \n
    \n
    \n With no default value\n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n color1: '#409EFF',\n color2: null\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With default value")]),a("el-color-picker",{model:{value:s.color1,callback:function(t){s.color1=t},expression:"color1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With no default value")]),a("el-color-picker",{model:{value:s.color2,callback:function(t){s.color2=t},expression:"color2"}})],1)]),a("p",[s._v("ColorPicker requires a string typed variable to be bound to v-model.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With default value"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With no default value"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#409EFF'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n color3: 'rgba(19, 206, 102, 0.8)'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(t){s.color3=t},expression:"color3"}})],1),a("p",[s._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),a("code",[s._v("show-alpha")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-alpha")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n color4: '#409EFF'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-color-picker",{model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}}),a("el-color-picker",{attrs:{size:"medium"},model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}}),a("el-color-picker",{attrs:{size:"small"},model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}}),a("el-color-picker",{attrs:{size:"mini"},model:{value:s.color4,callback:function(t){s.color4=t},expression:"color4"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-color-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"color4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("color4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#409EFF'")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alpha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alpha")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable the ColorPicker")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of ColorPicker")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("medium / small / mini")])]),a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("whether to display the alpha slider")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("color format of v-model")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for ColorPicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("color value")])]),a("tr",[a("td",[s._v("active-change")]),a("td",[s._v("triggers when the current active color changes")]),a("td",[s._v("active color value")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(932)},function(s,t,a){"use strict";function e(s){a(933)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(935),n=a(0),r=e,v=n(null,l.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var e=a(934);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("501f1965",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,'.demo-color-box{border-radius:4px;padding:20px;height:74px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-group .demo-color-box{border-radius:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-blue{background-color:#409eff}.bg-success{background-color:#13ce66}.bg-warning{background-color:#f7ba2a}.bg-danger{background-color:#ff4949}.bg-info{background-color:#878d99}.bg-text-primary{background-color:#2d2f33}.bg-text-regular{background-color:#5a5e66}.bg-text-secondary{background-color:#878d99}.bg-text-placeholder{background-color:#b4bccc}.bg-border-base{background-color:#d8dce6}.bg-border-light{background-color:#dfe4ed}.bg-border-lighter{background-color:#e6ebf5}.bg-border-extra-light{background-color:#edf2fc}[class*=" bg-border-"]{color:#5a5e66}',""])},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),s._m(1),a("p",[s._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#409EFF")])])])],1),s._m(2),a("p",[s._v("Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#67C23A")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#EB9E05")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#FA5555")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Info"),a("div",{staticClass:"value"},[s._v("#878D99")])])])],1),s._m(3),a("p",[s._v("Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-text-primary"},[s._v("Primary Text"),a("div",{staticClass:"value"},[s._v("#2D2F33")])]),a("div",{staticClass:"demo-color-box bg-text-regular"},[s._v("Regular Text"),a("div",{staticClass:"value"},[s._v("#5A5E66")])]),a("div",{staticClass:"demo-color-box bg-text-secondary"},[s._v("Secondary Text"),a("div",{staticClass:"value"},[s._v("#878D99")])]),a("div",{staticClass:"demo-color-box bg-text-placeholder"},[s._v("Placeholder Text"),a("div",{staticClass:"value"},[s._v("#B4BCCC")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-border-base"},[s._v("Base Border"),a("div",{staticClass:"value"},[s._v("#D8DCE6")])]),a("div",{staticClass:"demo-color-box bg-border-light"},[s._v("Light Border"),a("div",{staticClass:"value"},[s._v("#DFE4ED")])]),a("div",{staticClass:"demo-color-box bg-border-lighter"},[s._v("Lighter Border"),a("div",{staticClass:"value"},[s._v("#E6EBF5")])]),a("div",{staticClass:"demo-color-box bg-border-extra-light"},[s._v("Extra Light Border"),a("div",{staticClass:"value"},[s._v("#EDF2FC")])])])])],1)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"main-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Main Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"secondary-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Secondary Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"neutral-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Neutral Color")])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(937)},function(s,t,a){"use strict";function e(s){a(938)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(940),n=a.n(l),r=a(941),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(939);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("5ad3cacc",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,"#common-layouts+.demo-container>.source>.el-container:nth-child(7) .el-aside{line-height:320px}.el-footer,.el-header{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside{color:#333}#common-layouts+.demo-container .el-footer,#common-layouts+.demo-container .el-header{text-align:center}#common-layouts+.demo-container .el-aside{background-color:#d3dce6;text-align:center;line-height:200px}#common-layouts+.demo-container .el-main{background-color:#e9eef3;color:#333;text-align:center;line-height:160px}#common-layouts+.demo-container>.source>.el-container{margin-bottom:40px}#common-layouts+.demo-container>.source>.el-container:nth-child(5) .el-aside,#common-layouts+.demo-container>.source>.el-container:nth-child(6) .el-aside{line-height:260px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){var s={date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"};return{tableData:Array(20).fill(s)}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Container components for scaffolding basic structure of the page:")]),s._m(1),s._m(2),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Header\n Main\n\n\n\n Header\n Main\n Footer\n\n\n\n Aside\n Main\n\n\n\n Header\n \n Aside\n Main\n \n\n\n\n Header\n \n Aside\n \n Main\n Footer\n \n \n\n\n\n Aside\n \n Header\n Main\n \n\n\n\n Aside\n \n Header\n Main\n Footer\n \n\n\n\n',script:null,style:"\n .el-header, .el-footer {\n background-color: #B3C0D1;\n color: #333;\n text-align: center;\n line-height: 60px;\n }\n \n .el-aside {\n background-color: #D3DCE6;\n color: #333;\n text-align: center;\n line-height: 200px;\n }\n \n .el-main {\n background-color: #E9EEF3;\n color: #333;\n text-align: center;\n line-height: 160px;\n }\n \n body > .el-container {\n margin-bottom: 40px;\n }\n \n .el-container:nth-child(5) .el-aside,\n .el-container:nth-child(6) .el-aside {\n line-height: 260px;\n }\n \n .el-container:nth-child(7) .el-aside {\n line-height: 320px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")])],1),a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")]),a("el-footer",[s._v("Footer")])],1),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-main",[s._v("Main")])],1),a("el-container",[a("el-header",[s._v("Header")]),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-main",[s._v("Main")])],1)],1),a("el-container",[a("el-header",[s._v("Header")]),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-container",[a("el-main",[s._v("Main")]),a("el-footer",[s._v("Footer")])],1)],1)],1),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")])],1)],1),a("el-container",[a("el-aside",{attrs:{width:"200px"}},[s._v("Aside")]),a("el-container",[a("el-header",[s._v("Header")]),a("el-main",[s._v("Main")]),a("el-footer",[s._v("Footer")])],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-header")]),s._v(", "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-footer")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#B3C0D1")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("60px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#D3DCE6")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-main")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#E9EEF3")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("160px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(" > "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(5)")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(",\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(6)")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("260px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-container")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":nth-child(7)")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("320px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n \n \n \n \n View\n Add\n Delete\n \n \n Tom\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n\n',script:"\n export default {\n data() {\n const item = {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n };\n return {\n tableData: Array(20).fill(item)\n }\n }\n };\n",style:"\n .el-header {\n background-color: #B3C0D1;\n color: #333;\n line-height: 60px;\n }\n \n .el-aside {\n color: #333;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[a("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[a("el-menu",{attrs:{"default-openeds":["1","3"]}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item-group",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Group 1")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("Option 1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("Option 2")])],2),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("Option 3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Option4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("Option 4-1")])],2)],2),a("el-submenu",{attrs:{index:"2"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-menu"}),s._v("Navigator Two")]),a("el-menu-item-group",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Group 1")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("Option 1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("Option 2")])],2),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"2-3"}},[s._v("Option 3")])],1),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Option 4")]),a("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("Option 4-1")])],2)],2),a("el-submenu",{attrs:{index:"3"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-setting"}),s._v("Navigator Three")]),a("el-menu-item-group",[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Group 1")]),a("el-menu-item",{attrs:{index:"3-1"}},[s._v("Option 1")]),a("el-menu-item",{attrs:{index:"3-2"}},[s._v("Option 2")])],2),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"3-3"}},[s._v("Option 3")])],1),a("el-submenu",{attrs:{index:"3-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Option 4")]),a("el-menu-item",{attrs:{index:"3-4-1"}},[s._v("Option 4-1")])],2)],2)],1)],1),a("el-container",[a("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[a("el-dropdown",[a("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("View")]),a("el-dropdown-item",[s._v("Add")]),a("el-dropdown-item",[s._v("Delete")])],1)],1),a("span",[s._v("Tom")])],1),a("el-main",[a("el-table",{attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"height: 500px; border: 1px solid #eee"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-aside")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"background-color: rgb(238, 241, 246)"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-openeds")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['1', '3']\"")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("Navigator One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("Option 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("Option 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("Option 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("Option 4-1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("Navigator Two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("Option 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("Option 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("Option 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-4-1"')]),s._v(">")]),s._v("Option 4-1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("Navigator Three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3-1"')]),s._v(">")]),s._v("Option 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3-2"')]),s._v(">")]),s._v("Option 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3-3"')]),s._v(">")]),s._v("Option 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Option 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3-4-1"')]),s._v(">")]),s._v("Option 4-1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-header")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text-align: right; font-size: 12px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-right: 15px"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("View"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Add"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Delete"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Tom"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-main")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"140"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-header")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#B3C0D1")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("60px")]),s._v(";\n }\n \n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-aside")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#333")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" item = {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Array")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("20")]),s._v(").fill(item)\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"container"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#container","aria-hidden":"true"}},[s._v("¶")]),s._v(" Container")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("")]),s._v(": wrapper container. When nested with a "),a("code",{pre:!0},[s._v("")]),s._v(" or "),a("code",{pre:!0},[s._v("")]),s._v(", all its child elements will be vertically arranged. Otherwise horizontally.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("")]),s._v(": container for headers.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("")]),s._v(": container for side sections (usually a side nav).")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("")]),s._v(": container for main sections.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("")]),s._v(": container for footers.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("These components use flex for layout, so please make sure your browser supports it. Besides, "),a("code",{pre:!0},[s._v("")]),s._v("'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a "),a("code",{pre:!0},[s._v("")]),s._v(".")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"common-layouts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#common-layouts","aria-hidden":"true"}},[s._v("¶")]),s._v(" Common layouts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[s._v("¶")]),s._v(" Example")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"container-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Container Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("direction")]),a("td",[s._v("layout direction for child elements")]),a("td",[s._v("string")]),a("td",[s._v("horizontal / vertical")]),a("td",[s._v("vertical when nested with "),a("code",{pre:!0},[s._v("el-header")]),s._v(" or "),a("code",{pre:!0},[s._v("el-footer")]),s._v("; horizontal otherwise")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"header-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Header Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the header")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("60px")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"aside-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Aside Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of the side section")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("300px")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"footer-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Footer Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the footer")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("60px")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(943)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(944),l=a(0),n=l(null,e.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom theme")]),a("p",[s._v("Under construction.")])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(946)},function(s,t,a){"use strict";function e(s){a(947)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(949),n=a.n(l),r=a(950),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(948);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("6bf976ae",e,!0)},function(s,t,a){t=s.exports=a(69)(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:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:""}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Date Picker for date input.")]),s._m(1),a("p",[s._v("Basic date picker measured by 'day'.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions1: {\n shortcuts: [{\n text: 'Today',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Yesterday',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: 'A week ago',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: '',\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Picker with quick options")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("The measurement is determined by the "),a("code",[s._v("type")]),s._v(" attribute. You can enable quick options by creating a "),a("code",[s._v("picker-options")]),s._v(" object with "),a("code",[s._v("shortcuts")]),s._v(" property. The disabled date is set by "),a("code",[s._v("disabledDate")]),s._v(", which is a function.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a day"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Picker with quick options"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a day"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions1")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can choose week, month or year by extending the standard date picker component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Week\n \n \n
    \n
    \n Month\n \n \n
    \n
    \n Year\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value3: '',\n value4: '',\n value5: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Week")]),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Month")]),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Year")]),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Week"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"week"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Week WW"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a week"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Month"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"month"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a month"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Year"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"year"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a year"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Picking a date range is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: 'Last week',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last month',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value6: '',\n value7: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With quick options")]),a("el-date-picker",{attrs:{type:"daterange",align:"right","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With quick options"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value8: '',\n value9: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("date")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("daterange")]),a("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}})],1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("date"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2010-10-01"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("daterange"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"daterange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2010-10-01"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value10: '',\n value11: '',\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Emits Date object")]),a("div",{staticClass:"demonstration"},[s._v("Value: "+s._s(s.value10))]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Emits formatted date")]),a("div",{staticClass:"demonstration"},[s._v("Value: "+s._s(s.value11))]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:s.value11,callback:function(t){s.value11=t},expression:"value11"}})],1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Emits Date object"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Value: {{ value10 }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"yyyy/MM/dd"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Emits formatted date"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Value: {{ value11 }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value11"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"yyyy/MM/dd"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value-format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"yyyy-MM-dd"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),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("")]),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)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"enter-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Enter Date")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"other-measurements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[s._v("¶")]),s._v(" Other measurements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date Range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"default-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default Value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If user hasn't picked a date, shows today's calendar by default. You can use "),a("code",{pre:!0},[s._v("default-value")]),s._v(" to set another date. Its value should be parsable by "),a("code",{pre:!0},[s._v("new Date()")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If type is "),a("code",{pre:!0},[s._v("daterange")]),s._v(", "),a("code",{pre:!0},[s._v("default-value")]),s._v(" sets the left side calendar.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"formatted-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#formatted-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" Formatted Value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("By default, DatePicker emits "),a("code",{pre:!0},[s._v("Date")]),s._v(" object. You can use "),a("code",{pre:!0},[s._v("value-format")]),s._v(" to designate the format of emitted value, it accepts the same format string of "),a("code",{pre:!0},[s._v("format")]),s._v(" attribute.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("This feature is at alpha stage. Feedback welcome.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder in non-range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("placeholder for the start date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("placeholder for the end date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the displayed value in the input box")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",{pre:!0},[s._v("yyyy")]),s._v(", month "),a("code",{pre:!0},[s._v("MM")]),s._v(", day "),a("code",{pre:!0},[s._v("dd")]),s._v(", hour "),a("code",{pre:!0},[s._v("HH")]),s._v(", minute "),a("code",{pre:!0},[s._v("mm")]),s._v(", second "),a("code",{pre:!0},[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DatePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("optional, default date of the calendar")]),a("td",[s._v("Date")]),a("td",[s._v("anything accepted by "),a("code",{pre:!0},[s._v("new Date()")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value-format")]),a("td",[s._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",{pre:!0},[s._v("yyyy")]),s._v(", month "),a("code",{pre:!0},[s._v("MM")]),s._v(", day "),a("code",{pre:!0},[s._v("dd")]),s._v(", hour "),a("code",{pre:!0},[s._v("HH")]),s._v(", minute "),a("code",{pre:!0},[s._v("mm")]),s._v(", second "),a("code",{pre:!0},[s._v("ss")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("a callback that triggers when the selected date is changed. Only for "),a("code",{pre:!0},[s._v("daterange")]),s._v(" and "),a("code",{pre:!0},[s._v("datetimerange")]),s._v(".")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",{pre:!0},[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",{pre:!0},[s._v("pick")]),s._v(" event. Example: "),a("code",{pre:!0},[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when user confirms the value")]),a("td",[s._v("component's binding value")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(952)},function(s,t,a){"use strict";function e(s){a(953)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(955),n=a.n(l),r=a(956),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(954);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("3bf54832",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".demo-block.demo-datetime-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-datetime-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-datetime-picker .block:last-child{border-right:none}.demo-datetime-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t,a){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:new Date,value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:"",value15:"",value16:""}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Select date and time in one picker.")]),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions1: {\n shortcuts: [{\n text: 'Today',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Yesterday',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: 'A week ago',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("You can select date and time in one picker at the same time by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetime")]),s._v(". The way to use shortcuts is the same as Date Picker.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select date and time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"datetime"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select date and time"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions1")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" date = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: 'Last week',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last month',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value4: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1)]],2),a("p",[s._v("You can select date and time range by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetimerange")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"datetimerange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pickerOptions2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("align")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" end = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" start = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{attrs:{class:"hljs-number"}},[s._v("3600")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("24")]),s._v(" * "),a("span",{attrs:{class:"hljs-number"}},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{attrs:{class:"hljs-string"}},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": ["),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v("), "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("11")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(")],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),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)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on "),a("code",{pre:!0},[s._v("pickerOptions")]),s._v(" and other attributes, you can refer to DatePicker and TimePicker.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder in non-range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("placeholder for the start date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("placeholder for the end date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("time-arrow-control")]),a("td",[s._v("whether to pick time using arrow buttons")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the displayed value in the input box")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",{pre:!0},[s._v("yyyy")]),s._v(" month "),a("code",{pre:!0},[s._v("MM")]),s._v(" day "),a("code",{pre:!0},[s._v("dd")]),s._v(", hour "),a("code",{pre:!0},[s._v("HH")]),s._v(", minute "),a("code",{pre:!0},[s._v("mm")]),s._v(", second "),a("code",{pre:!0},[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DateTimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("optional, default date of the calendar")]),a("td",[s._v("Date")]),a("td",[s._v("anything accepted by "),a("code",{pre:!0},[s._v("new Date()")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value-format")]),a("td",[s._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",{pre:!0},[s._v("yyyy")]),s._v(", month "),a("code",{pre:!0},[s._v("MM")]),s._v(", day "),a("code",{pre:!0},[s._v("dd")]),s._v(", hour "),a("code",{pre:!0},[s._v("HH")]),s._v(", minute "),a("code",{pre:!0},[s._v("mm")]),s._v(", second "),a("code",{pre:!0},[s._v("ss")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",{pre:!0},[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",{pre:!0},[s._v("pick")]),s._v(" event. Example: "),a("code",{pre:!0},[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when user confirms the value")]),a("td",[s._v("component's binding value")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(958)},function(s,t,a){"use strict";function e(s){a(959)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(961),n=a.n(l),r=a(962),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(960);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("0a4efab7",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".demo-box.demo-dialog .dialog-footer button:first-child{margin-right:10px}.demo-box.demo-dialog .full-image{width:100%}.demo-box.demo-dialog .el-dialog__wrapper{margin:0}.demo-box.demo-dialog .el-input,.demo-box.demo-dialog .el-select{width:300px}.demo-box.demo-dialog .el-button--text{margin-right:15px}",""])},function(s,t,a){"use strict";s.exports={data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,outerVisible:!1,innerVisible:!1,centerDialogVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}},methods:{handleClose:function(s){this.$confirm("Are you sure to close this dialog?").then(function(t){s()}).catch(function(s){})}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Informs users while preserving the current page state.")]),s._m(1),a("p",[s._v("Dialog pops up a dialog box, and it's quite customizable.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'click to open the Dialog\n\n\n This is a message\n \n Cancel\n Confirm\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n dialogVisible: false\n };\n },\n methods: {\n handleClose(done) {\n this.$confirm('Are you sure to close this dialog?')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("click to open the Dialog")]),a("el-dialog",{attrs:{title:"Tips",visible:s.dialogVisible,width:"30%","before-close":s.handleClose},on:{"update:visible":function(t){s.dialogVisible=t}}},[a("span",[s._v("This is a message")]),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Set the "),a("code",[s._v("visible")]),s._v(" attribute with a "),a("code",[s._v("Boolean")]),s._v(", and Dialog shows when it is "),a("code",[s._v("true")]),s._v(". The Dialog has two parts: "),a("code",[s._v("body")]),s._v(" and "),a("code",[s._v("footer")]),s._v(", and the latter requires a "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("footer")]),s._v(". The optional "),a("code",[s._v("title")]),s._v(" attribute (empty by default) is for defining a title. Finally, this example demonstrates how "),a("code",[s._v("before-close")]),s._v(" is used.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Tips"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":before-close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("This is a message"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dialogVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClose(done) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Are you sure to close this dialog?'")]),s._v(")\n .then("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n done();\n })\n .catch("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {});\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("p",[s._v("The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\x3c!-- Table --\x3e\nopen a Table nested Dialog\n\n\n \n \n \n \n \n\n\n\x3c!-- Form --\x3e\nopen a Form nested Dialog\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n Cancel\n Confirm\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-03',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n dialogTableVisible: false,\n dialogFormVisible: false,\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n formLabelWidth: '120px'\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("open a Table nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogTableVisible},on:{"update:visible":function(t){s.dialogTableVisible=t}}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("open a Form nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogFormVisible},on:{"update:visible":function(t){s.dialogFormVisible=t}}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":s.formLabelWidth}},[a("el-input",{attrs:{"auto-complete":"off"},model:{value:s.form.name,callback:function(t){s.$set(s.form,"name",t)},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Zones","label-width":s.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:s.form.region,callback:function(t){s.$set(s.form,"region",t)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Confirm")])],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- Table --\x3e")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("open a Table nested Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Shipping address"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- Form --\x3e")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("open a Form nested Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Shipping address"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zones"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.region"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please select a zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone No.1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone No.2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("gridData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dialogTableVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dialogFormVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("form")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("formLabelWidth")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'120px'")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n outerVisible: false,\n innerVisible: false\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.outerVisible=!0}}},[s._v("open the outer Dialog")]),a("el-dialog",{attrs:{title:"Outter Dialog",visible:s.outerVisible},on:{"update:visible":function(t){s.outerVisible=t}}},[a("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:s.innerVisible,"append-to-body":""},on:{"update:visible":function(t){s.innerVisible=t}}}),a("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.outerVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.innerVisible=!0}}},[s._v("open the inner Dialog")])],1)],1)]],2),a("p",[s._v("Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set "),a("code",[s._v("append-to-body")]),s._v(" of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"outerVisible = true"')]),s._v(">")]),s._v("open the outer Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n \n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Outter Dialog"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"outerVisible"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Inner Dialog"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"innerVisible"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("append-to-body")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"outerVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"innerVisible = true"')]),s._v(">")]),s._v("open the inner Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("outerVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("innerVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),a("p",[s._v(":::")]),s._m(6),a("p",[s._v("Dialog's content can be centered.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Click to open the Dialog\n\n\n It should be noted that the content will not be aligned in center by default\n \n Cancel\n Confirm\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n centerDialogVisible: false\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.centerDialogVisible=!0}}},[s._v("Click to open the Dialog")]),a("el-dialog",{attrs:{title:"Warning",visible:s.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(t){s.centerDialogVisible=t}}},[a("span",[s._v("It should be noted that the content will not be aligned in center by default")]),a("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[a("el-button",{on:{click:function(t){s.centerDialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.centerDialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Setting "),a("code",[s._v("center")]),s._v(" to "),a("code",[s._v("true")]),s._v(" will center dialog's header and footer horizontally.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = true"')]),s._v(">")]),s._v("Click to open the Dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Warning"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"30%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("It should be noted that the content will not be aligned in center by default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("centerDialogVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("code",{pre:!0},[s._v("before-close")]),s._v(" only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the "),a("code",{pre:!0},[s._v("footer")]),s._v(" named slot, you can add what you would do with "),a("code",{pre:!0},[s._v("before-close")]),s._v(" in the buttons' click event handler.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If a Dialog is nested in another Dialog, "),a("code",{pre:!0},[s._v("append-to-body")]),s._v(" is required.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"centered-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("code",{pre:!0},[s._v("center")]),s._v(" only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("If the variable bound to "),a("code",{pre:!0},[s._v("visible")]),s._v(" is managed in Vuex store, the "),a("code",{pre:!0},[s._v(".sync")]),s._v(" can not work properly. In this case, please remove the "),a("code",{pre:!0},[s._v(".sync")]),s._v(" modifier, listen to "),a("code",{pre:!0},[s._v("open")]),s._v(" and "),a("code",{pre:!0},[s._v("close")]),s._v(" events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("visible")]),a("td",[s._v("visibility of Dialog, supports the .sync modifier")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("50%")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("whether the Dialog takes up full screen")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("value for "),a("code",{pre:!0},[s._v("margin-top")]),s._v(" of Dialog CSS")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15vh")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("whether a mask is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("append-to-body")]),a("td",[s._v("whether to append Dialog itself to body. A nested Dialog should have this attribute set to "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("whether scroll of body is disabled while Dialog is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("custom class names for Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("whether the Dialog can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("whether the Dialog can be closed by pressing ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("before-close")]),a("td",[s._v("callback before Dialog closes, and it will prevent Dialog from closing")]),a("td",[s._v("function(done)，done is used to close the Dialog")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to align the header and footer in center")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Dialog")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("content of the Dialog title")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("content of the Dialog footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("triggers when the Dialog opens")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when the Dialog closes")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(964)},function(s,t,a){"use strict";function e(s){a(965)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(967),n=a.n(l),r=a(968),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(966);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("916172b8",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".demo-box .el-dropdown{vertical-align:top}.demo-box .el-dropdown+.el-dropdown{margin-left:15px}.demo-box .el-dropdown-link{cursor:pointer;color:#409eff}.demo-box .el-icon-arrow-down{font-size:12px}.block-col-2{margin:-24px}.block-col-2 .el-col{padding:30px 0;text-align:center;border-right:1px solid #eff2f6}.block-col-2 .el-col:last-child{border-right:0}.demo-dropdown .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Toggleable menu for displaying lists of links and actions.")]),s._m(1),a("p",[s._v("Hover on the dropdown menu to unfold it for more actions.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._v("The triggering element is rendered by the default "),a("code",[s._v("slot")]),s._v(", and the dropdown part is rendered by the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("dropdown")]),s._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n")])])])]),s._m(2),a("p",[s._v("Use the button to trigger the dropdown list.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n Dropdown List\n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n\n',script:"\n export default {\n methods: {\n handleClick() {\n alert('button click');\n }\n }\n }\n",style:"\n .el-dropdown {\n vertical-align: top;\n }\n .el-dropdown + .el-dropdown {\n margin-left: 15px;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n Dropdown List\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("p",[s._v("Use "),a("code",[s._v("split-button")]),s._v(" to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class "),a("code",[s._v("divider")]),s._v(" to item four.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n Dropdown List\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("vertical-align")]),s._v(": top;\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" + "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("15px")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick() {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'button click'")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Click the triggering element or hover on it.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n hover to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n \n click to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n .demonstration {\n display: block;\n color: #8492a6;\n font-size: 14px;\n margin-bottom: 20px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover to trigger")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click to trigger")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1)],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("trigger")]),s._v(". By default, it is "),a("code",[s._v("hover")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("hover to trigger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("click to trigger"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".demonstration")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#8492a6")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("14px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._v("By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":hide-on-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n\n',script:"\n export default {\n methods: {\n handleCommand(command) {\n this.$message('click on item ' + command);\n }\n }\n }\n",style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-arrow-down el-icon--right"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"d"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("command")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"e"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-icon-arrow-down")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCommand(command) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),a("span",{attrs:{class:"hljs-string"}},[s._v("'click on item '")]),s._v(" + command);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Default\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Medium\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Small\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Mini\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[s._v("\n Default\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1),a("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[s._v("\n Medium\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1),a("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[s._v("\n Small\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1),a("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[s._v("\n Mini\n "),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1)],1),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("medium")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Default\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Medium\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Small\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("split-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("\n Mini\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"triggering-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Triggering element")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"how-to-trigger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[s._v("¶")]),s._v(" How to trigger")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-hiding-behavior"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu hiding behavior")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",{pre:!0},[s._v("hide-on-click")]),s._v(" to define if menu closes on clicking.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"command-event"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[s._v("¶")]),s._v(" Command event")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("menu button type, refer to "),a("code",{pre:!0},[s._v("Button")]),s._v(" Component, only works when "),a("code",{pre:!0},[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("menu size, refer to "),a("code",{pre:!0},[s._v("Button")]),s._v(" Component, also works on the Split-button")]),a("td",[s._v("string")]),a("td",[s._v("large / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("whether a button group is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("component size, refer to "),a("code",{pre:!0},[s._v("Button")]),s._v(" component")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("placement of pop menu")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),a("td",[s._v("bottom-end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how to trigger")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("whether to hide menu after clicking menu-item")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("if "),a("code",{pre:!0},[s._v("split-button")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v(", triggers when left button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("triggers when a dropdown item is clicked")]),a("td",[s._v("the command dispatched from the dropdown item")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("a command to be dispatched to Dropdown's "),a("code",{pre:!0},[s._v("command")]),s._v(" callback")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the item is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("whether a divider is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(970)},function(s,t,a){"use strict";function e(s){a(971)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(973),n=a.n(l),r=a(974),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(972);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("3fee593f",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,'.demo-form.demo-en-US .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-en-US .el-select .el-input{width:360px}.demo-form.demo-en-US .el-form{width:480px}.demo-form.demo-en-US .line{text-align:center}.demo-form.demo-en-US .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-en-US .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-en-US .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-en-US .el-checkbox-group:after,.demo-form.demo-en-US .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-en-US .demo-form-normal{width:480px}.demo-form.demo-en-US .demo-form-inline{width:auto}.demo-form.demo-en-US .demo-form-inline .el-input{width:150px}.demo-form.demo-en-US .demo-form-inline>*{margin-right:10px}.demo-form.demo-en-US .demo-ruleForm{width:480px}.demo-form.demo-en-US .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-en-US .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-en-US .fr{float:right}',""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){var s=this,t=function(s,t,a){if(!t)return a(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3)};return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},labelPosition:"right",formLabelAlign:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]},rules2:{pass:[{validator:function(t,a,e){""===a?e(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),e())},trigger:"blur"}],checkPass:[{validator:function(t,a,e){""===a?e(new Error("Please input the password again")):a!==s.ruleForm2.pass?e(new Error("Two inputs don't match!")):e()},trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{key:Date.now(),value:""}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},onRuleFormSubmit:function(){console.log("onRuleFormSubmit")},submitForm:function(s){this.$refs[s].validate(function(s){if(!s)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Cancel\n \n\n\n',script:"\n export default {\n data() {\n return {\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:s.form.name,callback:function(t){s.$set(s.form,"name",t)},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.form.region,callback:function(t){s.$set(s.form,"region",t)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.form.date1,callback:function(t){s.$set(s.form,"date1",t)},expression:"form.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.form.date2,callback:function(t){s.$set(s.form,"date2",t)},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.form.delivery,callback:function(t){s.$set(s.form,"delivery",t)},expression:"form.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:s.form.type,callback:function(t){s.$set(s.form,"type",t)},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:s.form.resource,callback:function(t){s.$set(s.form,"resource",t)},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(t){s.$set(s.form,"desc",t)},expression:"form.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),a("el-button",[s._v("Cancel")])],1)],1)],1),a("p",[s._v("In each "),a("code",[s._v("form")]),s._v(" component, you need a "),a("code",[s._v("form-item")]),s._v(" field to be the container of your input item.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.region"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.date1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.date2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Instant delivery"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("on-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('""')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("off-text")]),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.delivery"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Offline activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.resource"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Sponsor"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.desc"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("form")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n Query\n \n\n\n',script:"\n export default {\n data() {\n return {\n formInline: {\n user: '',\n region: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:s.formInline.user,callback:function(t){s.$set(s.formInline,"user",t)},expression:"formInline.user"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.formInline.region,callback:function(t){s.$set(s.formInline,"region",t)},expression:"formInline.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Query")])],1)],1)],1),a("p",[s._v("Set the "),a("code",[s._v("inline")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the form will be inline.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":inline")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formInline"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Approved by"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formInline.user"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Approved by"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formInline.region"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Query"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("formInline")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("user")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Depending on your design, there are several different ways to align your label element.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Left\n Right\n Top\n\n
    \n\n \n \n \n \n \n \n \n \n \n\n\n',script:"\n export default {\n data() {\n return {\n labelPosition: 'right',\n formLabelAlign: {\n name: '',\n region: '',\n type: ''\n }\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.labelPosition,callback:function(t){s.labelPosition=t},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("Left")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("Right")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("Top")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"100px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{model:{value:s.formLabelAlign.name,callback:function(t){s.$set(s.formLabelAlign,"name",t)},expression:"formLabelAlign.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{model:{value:s.formLabelAlign.region,callback:function(t){s.$set(s.formLabelAlign,"region",t)},expression:"formLabelAlign.region"}})],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{model:{value:s.formLabelAlign.type,callback:function(t){s.$set(s.formLabelAlign,"type",t)},expression:"formLabelAlign.type"}})],1)],1)],1),a("p",[s._v("The "),a("code",[s._v("label-position")]),s._v(" attribute decides how labels align, it can be "),a("code",[s._v("top")]),s._v(" or "),a("code",[s._v("left")]),s._v(". When set to "),a("code",[s._v("top")]),s._v(", labels will be placed at the top of the form field.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"labelPosition"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("Left"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("Right"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("Top"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label-position")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"labelPosition"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.region"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formLabelAlign.type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("labelPosition")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'right'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("formLabelAlign")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Form component allows you to verify your data, helping you find and correct errors.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Reset\n \n\n\n',script:"\n export default {\n data() {\n return {\n ruleForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n rules: {\n name: [\n { required: true, message: 'Please input Activity name', trigger: 'blur' },\n { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }\n ],\n region: [\n { required: true, message: 'Please select Activity zone', trigger: 'change' }\n ],\n date1: [\n { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }\n ],\n date2: [\n { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }\n ],\n type: [\n { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }\n ],\n resource: [\n { required: true, message: 'Please select activity resource', trigger: 'change' }\n ],\n desc: [\n { required: true, message: 'Please input activity form', trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{model:{value:s.ruleForm.name,callback:function(t){s.$set(s.ruleForm,"name",t)},expression:"ruleForm.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.ruleForm.region,callback:function(t){s.$set(s.ruleForm,"region",t)},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.ruleForm.date1,callback:function(t){s.$set(s.ruleForm,"date1",t)},expression:"ruleForm.date1"}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.ruleForm.date2,callback:function(t){s.$set(s.ruleForm,"date2",t)},expression:"ruleForm.date2"}})],1)],1)],1),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.ruleForm.delivery,callback:function(t){s.$set(s.ruleForm,"delivery",t)},expression:"ruleForm.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{model:{value:s.ruleForm.type,callback:function(t){s.$set(s.ruleForm,"type",t)},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{model:{value:s.ruleForm.resource,callback:function(t){s.$set(s.ruleForm,"resource",t)},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"Sponsorship"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.ruleForm.desc,callback:function(t){s.$set(s.ruleForm,"desc",t)},expression:"ruleForm.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm")}}},[s._v("Create")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Just add the "),a("code",[s._v("rule")]),s._v(" attribute for "),a("code",[s._v("Form")]),s._v(" component, pass validation rules, and set "),a("code",[s._v("prop")]),s._v(" attribute for "),a("code",[s._v("Form-Item")]),s._v(" as a specific key that needs to be validated. See more information at "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rules"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"region"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.region"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Instant delivery"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"delivery"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("on-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('""')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("off-text")]),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.delivery"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Offline activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"resource"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Sponsorship"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity form"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"desc"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("Create"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ruleForm")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("delivery")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input Activity name'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Length should be 3 to 5'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("region")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select Activity zone'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date1")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please pick a date'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date2")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please pick a time'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'array'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select at least one activity type'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("resource")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please select activity resource'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input activity form'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n Submit\n Reset\n \n\n\n',script:"\n export default {\n data() {\n var checkAge = (rule, value, callback) => {\n if (!value) {\n return callback(new Error('Please input the age'));\n }\n setTimeout(() => {\n if (!Number.isInteger(value)) {\n callback(new Error('Please input digits'));\n } else {\n if (value < 18) {\n callback(new Error('Age must be greater than 18'));\n } else {\n callback();\n }\n }\n }, 1000);\n };\n var validatePass = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('Please input the password'));\n } else {\n if (this.ruleForm2.checkPass !== '') {\n this.$refs.ruleForm2.validateField('checkPass');\n }\n callback();\n }\n };\n var validatePass2 = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('Please input the password again'));\n } else if (value !== this.ruleForm2.pass) {\n callback(new Error('Two inputs don\\'t match!'));\n } else {\n callback();\n }\n };\n return {\n ruleForm2: {\n pass: '',\n checkPass: '',\n age: ''\n },\n rules2: {\n pass: [\n { validator: validatePass, trigger: 'blur' }\n ],\n checkPass: [\n { validator: validatePass2, trigger: 'blur' }\n ],\n age: [\n { validator: checkAge, trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,"status-icon":"",rules:s.rules2,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.pass,callback:function(t){s.$set(s.ruleForm2,"pass",t)},expression:"ruleForm2.pass"}})],1),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.checkPass,callback:function(t){s.$set(s.ruleForm2,"checkPass",t)},expression:"ruleForm2.checkPass"}})],1),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{model:{value:s.ruleForm2.age,callback:function(t){s.$set(s.ruleForm2,"age",s._n(t))},expression:"ruleForm2.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Here we use "),a("code",[s._v("status-icon")]),s._v(" to reflect validation result as an icon.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status-icon")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rules2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Password"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pass"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"password"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Confirm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"checkPass"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"password"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Age"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model.number")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ruleForm2.age"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("Submit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("Reset"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" checkAge = "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!value) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input the age'")]),s._v("));\n }\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v(".isInteger(value)) {\n callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input digits'")]),s._v("));\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value < "),a("span",{attrs:{class:"hljs-number"}},[s._v("18")]),s._v(") {\n callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Age must be greater than 18'")]),s._v("));\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n callback();\n }\n }\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(");\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" validatePass = "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value === "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input the password'")]),s._v("));\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{attrs:{class:"hljs-string"}},[s._v("'checkPass'")]),s._v(");\n }\n callback();\n }\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" validatePass2 = "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value === "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input the password again'")]),s._v("));\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (value !== "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".ruleForm2.pass) {\n callback("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Error")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Two inputs don\\'t match!'")]),s._v("));\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n callback();\n }\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ruleForm2")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pass")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkPass")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rules2")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pass")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": validatePass, "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("checkPass")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": validatePass2, "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": checkAge, "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n Delete\n \n \n Submit\n New domain\n Reset\n \n\n\n',script:"\n export default {\n data() {\n return {\n dynamicValidateForm: {\n domains: [{\n key: 1,\n value: ''\n }],\n email: ''\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n },\n removeDomain(item) {\n var index = this.dynamicValidateForm.domains.indexOf(item);\n if (index !== -1) {\n this.dynamicValidateForm.domains.splice(index, 1);\n }\n },\n addDomain() {\n this.dynamicValidateForm.domains.push({\n key: Date.now(),\n value: ''\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:"blur,change"}]}},[a("el-input",{model:{value:s.dynamicValidateForm.email,callback:function(t){s.$set(s.dynamicValidateForm,"email",t)},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(a){s.$set(t,"value",a)},expression:"domain.value"}}),a("el-button",{on:{click:function(a){a.preventDefault(),s.removeDomain(t)}}},[s._v("Delete")])],1)}),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("dynamicValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:s.addDomain}},[s._v("New domain")]),a("el-button",{on:{click:function(t){s.resetForm("dynamicValidateForm")}}},[s._v("Reset")])],1)],2)],1),a("p",[s._v("In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"email"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Email"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"[\n { required: true, message: 'Please input email address', trigger: 'blur' },\n { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }\n ]\"")]),s._v("\n >")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"'Domain' + index\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"domain.key"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n required: true, message: 'domain can not be null', trigger: 'blur'\n }\"")]),s._v("\n >")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"domain.value"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click.prevent")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("Delete"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"addDomain"')]),s._v(">")]),s._v("New domain"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dynamicValidateForm")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("domains")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n },\n removeDomain(item) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" index = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item);\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index !== "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n }\n },\n addDomain() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v(".now(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n Submit\n Reset\n \n\n\n',script:"\n export default {\n data() {\n return {\n numberValidateForm: {\n age: ''\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[a("el-input",{attrs:{type:"age","auto-complete":"off"},model:{value:s.numberValidateForm.age,callback:function(t){s.$set(s.numberValidateForm,"age",s._n(t))},expression:"numberValidateForm.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("numberValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("numberValidateForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Number Validate need a "),a("code",[s._v(".number")]),s._v(" modifier added on the input "),a("code",[s._v("v-model")]),s._v(" binding，it's used to transform the string value to the number which is provided by Vuejs.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rules")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"[\n { required: true, message: 'age is required'},\n { type: 'number', message: 'age must be a number'}\n ]\"")]),s._v("\n >")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"age"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model.number")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"numberValidateForm.age"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("auto-complete")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"off"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("numberValidateForm")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("age")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'submit!'")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Cancel\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"120px",size:"mini"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:s.form.name,callback:function(t){s.$set(s.form,"name",t)},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.form.region,callback:function(t){s.$set(s.form,"region",t)},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.form.date1,callback:function(t){s.$set(s.form,"date1",t)},expression:"form.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.form.date2,callback:function(t){s.$set(s.form,"date2",t)},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:s.form.type,callback:function(t){s.$set(s.form,"type",t)},expression:"form.type"}},[a("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:s.form.resource,callback:function(t){s.$set(s.form,"resource",t)},expression:"form.resource"}},[a("el-radio",{attrs:{border:"",label:"Sponsor"}}),a("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),a("el-form-item",{attrs:{size:"large"}},[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),a("el-button",[s._v("Cancel")])],1)],1)],1),a("p",[s._v("Still you can fine tune each component's "),a("code",[s._v("size")]),s._v(" if you don't want that component to inherit its size from From or FormIten.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120px"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.region"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone one"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"shanghai"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zone two"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beijing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-date-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.date1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fixed-time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a time"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.date2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Activity type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.type"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Online activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-checkbox-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Promotion activities"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Resources"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"form.resource"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Sponsor"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Venue"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-form-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"large"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Form consists of "),a("code",{pre:!0},[s._v("input")]),s._v(", "),a("code",{pre:!0},[s._v("radio")]),s._v(", "),a("code",{pre:!0},[s._v("select")]),s._v(", "),a("code",{pre:!0},[s._v("checkbox")]),s._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("It includes all kinds of input items, such as "),a("code",{pre:!0},[s._v("input")]),s._v(", "),a("code",{pre:!0},[s._v("select")]),s._v(", "),a("code",{pre:!0},[s._v("radio")]),s._v(" and "),a("code",{pre:!0},[s._v("checkbox")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"inline-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inline form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"validation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Validation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-validation-rules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom validation rules")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Delete or add form items dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"number-validate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Number Validate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("When an "),a("code",{pre:!0},[s._v("el-form-item")]),s._v(" is nested in another "),a("code",{pre:!0},[s._v("el-form-item")]),s._v(", its label width will be "),a("code",{pre:!0},[s._v("0")]),s._v(". You can set "),a("code",{pre:!0},[s._v("label-width")]),s._v(" on that "),a("code",{pre:!0},[s._v("el-form-item")]),s._v(" if needed.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"size-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#size-control","aria-hidden":"true"}},[s._v("¶")]),s._v(" Size control")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("All components in a Form inherit their "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute from that Form. Similarly, FormItem also has a "),a("code",{pre:!0},[s._v("size")]),s._v(" attribute.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("data of form component")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("whether the form is inline")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("position of label")]),a("td",[s._v("string")]),a("td",[s._v("left/right/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, and all its direct child form items will inherit this value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("suffix of the label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("inline-message")]),a("td",[s._v("whether to display the error message inline with the form item")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status-icon")]),a("td",[s._v("whether to display an icon indicating the validation result")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("control the size of components in this form")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("the method to validate the whole form. Returns a promise if callback is omitted")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("the method to validate a certain form item")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("reset all the fields and remove validation result")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("a key of "),a("code",{pre:!0},[s._v("model")]),s._v(". In the use of validate and resetFields method, the attribute is required")]),a("td",[s._v("string")]),a("td",[s._v("keys of model that passed to "),a("code",{pre:!0},[s._v("form")])]),a("td")]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, e.g. '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("whether the field is required or not, will be determined by validation rules if omitted")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("field error message, set its value and the field will validate error and show this message immediately")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("inline-message")]),a("td",[s._v("inline style validate message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("control the size of components in this form-item")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Form Item")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("content of label")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("resetField")]),a("td",[s._v("reset current field and remove validation result")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(976)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(977),l=a(0),n=l(null,e.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"internationalization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internationalization")]),a("p",[s._v("The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("Or if you are importing Element on demand:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" lang "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" locale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("The Chinese language pack is imported by default, even if you're using another language. But with "),a("code",{pre:!0},[s._v("NormalModuleReplacementPlugin")]),s._v(" provided by webpack you can replace default locale:")]),a("p",[s._v("webpack.config.js")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[s._v("{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plugins")]),s._v(": [\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n ]\n}\n")])]),a("h2",{attrs:{id:"compatible-with"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",{pre:!0},[s._v("vue-i18n@5.x")])]),a("p",[s._v("Element is compatible with "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v(", which makes multilingual switching even easier.")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", enLocale)\n")])]),a("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with other i18n plugins")]),a("p",[s._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),a("span",{attrs:{class:"hljs-params"}},[s._v("path, options")]),s._v(") ")]),s._v("{\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n }\n})\n")])]),a("h2",{attrs:{id:"compatible-with-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",{pre:!0},[s._v("vue-i18n@6.x")])]),a("p",[s._v("You need to manually handle it for compatibility with "),a("code",{pre:!0},[s._v("6.x")]),s._v(".")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" messages = {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n ...enLocale "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// Or use `Object.assign({ message: 'hello' }, enLocale)`")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n ...zhLocale "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// Or use `Object.assign({ message: '你好' }, zhLocale)`")]),s._v("\n }\n}\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" i18n = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n messages, "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("i18n")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value)\n})\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),a("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(")\n")])]),a("h2",{attrs:{id:"custom-i18n-in-on-demand-components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-i18n-in-on-demand-components","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom i18n in on-demand components")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" DatePicker "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element/lib/date-picker'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" VueI18n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue-i18n'")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" zhLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementLocale "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/locale'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" messages = {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("en")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n ...enLocale\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zh")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'你好'")]),s._v(",\n ...zhLocale\n }\n}\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" i18n = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("locale")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale")]),s._v("\n messages, "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// set locale messages")]),s._v("\n})\n\nElementLocale.i18n("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value))\n")])]),a("h2",{attrs:{id:"import-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import via CDN")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),a("p",[s._v("Compatible with "),a("code",{pre:!0},[s._v("vue-i18n")])]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"actionscript"}},[s._v("\n Vue.locale("),a("span",{attrs:{class:"hljs-string"}},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n Vue.locale("),a("span",{attrs:{class:"hljs-string"}},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),a("p",[s._v("Currently Element ships with the following languages:")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("Simplified Chinese (zh-CN)")]),a("li",[s._v("English (en)")]),a("li",[s._v("German (de)")]),a("li",[s._v("Portuguese (pt)")]),a("li",[s._v("Spanish (es)")]),a("li",[s._v("Danish (da)")]),a("li",[s._v("French (fr)")]),a("li",[s._v("Norwegian (nb-NO)")]),a("li",[s._v("Traditional Chinese (zh-TW)")]),a("li",[s._v("Italian (it)")]),a("li",[s._v("Korean (ko)")]),a("li",[s._v("Japanese (ja)")]),a("li",[s._v("Dutch (nl)")]),a("li",[s._v("Vietnamese (vi)")]),a("li",[s._v("Russian (ru-RU)")]),a("li",[s._v("Turkish (tr-TR)")]),a("li",[s._v("Brazilian Portuguese (pt-br)")]),a("li",[s._v("Farsi (fa)")]),a("li",[s._v("Thai (th)")]),a("li",[s._v("Indonesian (id)")]),a("li",[s._v("Bulgarian (bg)")]),a("li",[s._v("Polish (pl)")]),a("li",[s._v("Finnish (fi)")]),a("li",[s._v("Swedish (sv-SE)")]),a("li",[s._v("Greek (el)")]),a("li",[s._v("Slovak (sk)")]),a("li",[s._v("Catalunya (ca)")]),a("li",[s._v("Czech (cz)")]),a("li",[s._v("Ukrainian (ua)")]),a("li",[s._v("Turkmen (tk)")]),a("li",[s._v("Tamil (ta)")]),a("li",[s._v("Latvian (lv)")]),a("li",[s._v("Afrikaans (af-ZA)")]),a("li",[s._v("Estonian (ee)")]),a("li",[s._v("Slovenian (sl)")]),a("li",[s._v("Arabic (ar)")]),a("li",[s._v("Hebrew (he)")])]),a("p",[s._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},[s._v("here")]),s._v(" and create a pull request.")])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(979)},function(s,t,a){"use strict";function e(s){a(980)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(982),n=a.n(l),r=a(983),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(981);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("113c6a93",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,'.icon-list li:hover{color:#5cb6ff}.icon-list li i{display:block;font-size:24px;margin-bottom:15px;color:#8492a6}.demo-icon .source>i{color:#8492a6;margin:0 20px;font-size:1.5em;vertical-align:middle}.demo-icon .source>button{margin:0 20px}.page-component .content>ul.icon-list{overflow:hidden;list-style:none;padding:0;border:1px solid #eaeefb;border-radius:4px}.icon-list li{float:left;width:16.66%;text-align:center;height:120px;line-height:120px;color:#666;font-size:13px;transition:color .15s linear;border-right:1px solid #eee;border-bottom:1px solid #eee;margin-right:-1px;margin-bottom:-1px}.icon-list li:after{content:"";height:100%}.icon-list li:after,.icon-list li span{display:inline-block;vertical-align:middle}.icon-list li span{line-height:normal;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#99a9bf}',""])},function(s,t,a){"use strict";t.__esModule=!0;var e=a(538);t.default={data:function(){return{icons:e}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element provides a set of common icons.")]),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("i",{staticClass:"el-icon-edit"}),a("i",{staticClass:"el-icon-share"}),a("i",{staticClass:"el-icon-delete"}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("Search")])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",{key:t},[a("span",[a("i",{class:"el-icon-"+t}),s._v("\n "+s._s("el-icon-"+t)+"\n ")])])}))],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Just assign the class name to "),a("code",{pre:!0},[s._v("el-icon-iconName")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icons")])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(985)},function(s,t,a){"use strict";function e(s){a(986)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(988),n=a.n(l),r=a(989),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(987);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("fc398156",e,!0)},function(s,t,a){t=s.exports=a(69)(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}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input numerical values with a customizable range.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num1: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value)\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{min:1,max:10},on:{change:s.handleChange},model:{value:s.num1,callback:function(t){s.num1=t},expression:"num1"}})]],2),a("p",[s._v("Bind a variable to "),a("code",[s._v("v-model")]),s._v(" in "),a("code",[s._v("")]),s._v(" element and you are set.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num1")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value)\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(t){s.num2=t},expression:"num2"}})]],2),a("p",[s._v("The "),a("code",[s._v("disabled")]),s._v(" attribute accepts a "),a("code",[s._v("boolean")]),s._v(", and if the value is "),a("code",[s._v("true")]),s._v(", the component is disabled. If you just need to control the value within a range, you can add "),a("code",[s._v("min")]),s._v(" attribute to set the minimum value and "),a("code",[s._v("max")]),s._v(" to set the maximum value. By default, the minimum value is "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num2")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Allows you to define incremental steps.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num3: 5\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(t){s.num3=t},expression:"num3"}})]],2),a("p",[s._v("Add "),a("code",[s._v("step")]),s._v(" attribute to set the step.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num4: 1,\n num5: 1,\n num6: 1,\n num7: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{model:{value:s.num4,callback:function(t){s.num4=t},expression:"num4"}}),a("el-input-number",{attrs:{size:"medium"},model:{value:s.num5,callback:function(t){s.num5=t},expression:"num5"}}),a("el-input-number",{attrs:{size:"small"},model:{value:s.num6,callback:function(t){s.num6=t},expression:"num6"}}),a("el-input-number",{attrs:{size:"mini"},model:{value:s.num7,callback:function(t){s.num7=t},expression:"num7"}})]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num5"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num7"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num4")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num5")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num6")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num7")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num8: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:s.handleChange},model:{value:s.num8,callback:function(t){s.num8=t},expression:"num8"}})]],2),a("p",[s._v("Set "),a("code",[s._v("controls-position")]),s._v(" to decide the position of control buttons.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input-number")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"num8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("controls-position")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":min")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("num8")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[s._v("¶")]),s._v(" Size")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use attribute "),a("code",{pre:!0},[s._v("size")]),s._v(" to set additional sizes with "),a("code",{pre:!0},[s._v("medium")]),s._v(", "),a("code",{pre:!0},[s._v("small")]),s._v(" or "),a("code",{pre:!0},[s._v("mini")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"controls-position"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#controls-position","aria-hidden":"true"}},[s._v("¶")]),s._v(" Controls Position")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("the minimum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("the maximum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[a("code",{pre:!0},[s._v("Infinity")])])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("incremental step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the component")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the component is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("whether to enable the control buttons")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("controls-position")]),a("td",[s._v("position of the control buttons")]),a("td",[s._v("string")]),a("td",[s._v("right")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes")]),a("td",[s._v("value after change")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("-")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(991)},function(s,t,a){"use strict";function e(s){a(992)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(994),n=a.n(l),r=a(995),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(993);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("1db9a737",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".demo-input.demo-en-US .el-select .el-input{width:130px}.demo-input.demo-en-US .el-input{width:180px}.demo-input.demo-en-US .el-textarea{width:414px}.demo-input.demo-en-US .el-input-group{width:100%}.demo-input.demo-en-US .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-en-US .demo-input-suffix{padding:10px}.demo-input.demo-en-US .demo-input-suffix .el-input{margin-right:15px}.demo-input.demo-en-US .demo-input-label{display:inline-block;width:130px}.demo-input.demo-en-US .demo-autocomplete{text-align:center}.demo-input.demo-en-US .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-en-US .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-en-US .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{links:[],input:"",input1:"",input2:"",input21:"",input22:"",input23:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearch:function(s,t){var a=this.links;t(s?a.filter(this.createStateFilter(s)):a)},querySearchAsync:function(s,t){var a=this.links,e=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(e)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input data using mouse or keyboard.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\nexport default {\n data() {\n return {\n input: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input,callback:function(t){s.input=t},expression:"input"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input1: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:s.input1,callback:function(t){s.input1=t},expression:"input1"}})],1),a("p",[s._v("Disable the Input with the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add an icon to indicate input type.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Using attributes\n \n \n \n \n
    \n
    \n Using slots\n \n \n \n \n \n \n
    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input2: '',\n input21: '',\n input22: '',\n input23: ''\n }\n }\n}\n",style:"\n .demo-input-label {\n display: inline-block;\n width: 130px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[s._v("Using attributes")]),a("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:s.input2,callback:function(t){s.input2=t},expression:"input2"}}),a("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:s.input21,callback:function(t){s.input21=t},expression:"input21"}})],1),a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[s._v("Using slots")]),a("el-input",{attrs:{placeholder:"Pick a date"},model:{value:s.input22,callback:function(t){s.input22=t},expression:"input22"}},[a("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),a("el-input",{attrs:{placeholder:"Type something"},model:{value:s.input23,callback:function(t){s.input23=t},expression:"input23"}},[a("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)]),a("p",[s._v("To add icons in Input, you can simply use "),a("code",[s._v("prefix-icon")]),s._v(" and "),a("code",[s._v("suffix-icon")]),s._v(" attributes. Also, the "),a("code",[s._v("prefix")]),s._v(" and "),a("code",[s._v("suffix")]),s._v(" named slots works as well.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-label"')]),s._v(">")]),s._v("Using attributes"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("suffix-icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Type something"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prefix-icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input21"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-label"')]),s._v(">")]),s._v("Using slots"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pick a date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input22"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"suffix"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-input__icon el-icon-date"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Type something"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input23"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prefix"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-input__icon el-icon-search"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".demo-input-label")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": inline-block;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("130px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input21")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input22")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input23")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:s.textarea,callback:function(t){s.textarea=t},expression:"textarea"}})],1),a("p",[s._v("Control the height by setting the "),a("code",[s._v("rows")]),s._v(" prop.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":rows")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("textarea")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n
    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea2: '',\n textarea3: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:s.textarea2,callback:function(t){s.textarea2=t},expression:"textarea2"}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:s.textarea3,callback:function(t){s.textarea3=t},expression:"textarea3"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("autosize")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin: 20px 0;"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":autosize")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("textarea2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("textarea3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Prepend or append an element, generally a label or a button.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n \n
    \n\n\n\n',script:"\nexport default {\n data() {\n return {\n input3: '',\n input4: '',\n input5: '',\n select: ''\n }\n }\n}\n",style:"\n .el-select .el-input {\n width: 110px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input3,callback:function(t){s.input3=t},expression:"input3"}},[a("template",{attrs:{slot:"prepend"},slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input4,callback:function(t){s.input4=t},expression:"input4"}},[a("template",{attrs:{slot:"append"},slot:"append"},[s._v(".com")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input5,callback:function(t){s.input5=t},expression:"input5"}},[a("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:s.select,callback:function(t){s.select=t},expression:"select"}},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),a("el-option",{attrs:{label:"Order No.",value:"2"}}),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),a("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)]),a("p",[s._v("Use "),a("code",[s._v("slot")]),s._v(" to distribute elements that prepend or append to Input.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"append"')]),s._v(">")]),s._v(".com"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input5"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"select"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prepend"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Restaurant"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Order No."')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Tel"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"append"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-search"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-input")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("110px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input5")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("select")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n \n \n \n \n \n
    \n\n\n',script:"\nexport default {\n data() {\n return {\n input6: '',\n input7: '',\n input8: '',\n input9: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{placeholder:"Please Input"},model:{value:s.input6,callback:function(t){s.input6=t},expression:"input6"}}),a("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:s.input7,callback:function(t){s.input7=t},expression:"input7"}}),a("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:s.input8,callback:function(t){s.input8=t},expression:"input8"}}),a("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:s.input9,callback:function(t){s.input9=t},expression:"input9"}})],1)]),a("p",[s._v("Add "),a("code",[s._v("size")]),s._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" and "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input6"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input7"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input8"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input9"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input6")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input7")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input8")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("input9")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("You can get some recommended tips based on the current input.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    list suggestions when activated
    \n \n     \n \n
    list suggestions on input
    \n \n     \n    \n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state1: \'\',\n state2: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n // call callback function to return suggestions\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n',style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions when activated")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input"},on:{select:s.handleSelect},model:{value:s.state1,callback:function(t){s.state1=t},expression:"state1"}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions on input")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:s.handleSelect},model:{value:s.state2,callback:function(t){s.state2=t},expression:"state2"}})],1)],1)],1),a("p",[s._v("Autocomplete component provides input suggestions. The "),a("code",[s._v("fetch-suggestions")]),s._v(" attribute is a method that returns suggested input. In this example, "),a("code",[s._v("querySearch(queryString, cb)")]),s._v(" returns suggestions to Autocomplete via "),a("code",[s._v("cb(data)")]),s._v(" when suggestions are ready.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions when activated"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"inline-input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions on input"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"inline-input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please Input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":trigger-on-focus")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// call callback function to return suggestions")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("Customize how suggestions are displayed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n\n\n\n\n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state3: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var links = this.links;\n var results = queryString ? link.filter(this.createFilter(queryString)) : links;\n // call callback function to return suggestion objects\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n },\n handleIconClick(ev) {\n console.log(ev);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n',style:"\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,placeholder:"Please input",icon:"edit","on-icon-click":s.handleIconClick},on:{select:s.handleSelect},scopedSlots:s._u([{key:"default",fn:function(t){return[a("div",{staticClass:"value"},[s._v(s._s(t.item.value))]),a("span",{staticClass:"link"},[s._v(s._s(t.item.link))])]}}]),model:{value:s.state3,callback:function(t){s.state3=t},expression:"state3"}})],1),a("p",[s._v("Use "),a("code",[s._v("scoped slot")]),s._v(" to customize suggestion items. In the scope, you can access the suggestion object via the "),a("code",[s._v("item")]),s._v(" key.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("popper-class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"my-autocomplete"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"querySearch"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"edit"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-icon-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("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(">")]),s._v("{{ props.item.value }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(">")]),s._v("{{ props.item.link }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? link.filter("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// call callback function to return suggestion objects")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n },\n handleIconClick(ev) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(ev);\n }\n },\n mounted() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Search data from server-side.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state4: \'\',\n timeout: null\n };\n },\n methods: {\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n querySearchAsync(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n cb(results);\n }, 3000 * Math.random());\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n };\n',style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"Please input"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(t){s.state4=t},expression:"state4"}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-autocomplete")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":fetch-suggestions")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"querySearchAsync"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please input"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("links")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("timeout")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n loadAll() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"element"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cooking"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"mint-ui"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vuex"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue-router"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"babel"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"link"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n querySearchAsync(queryString, cb) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n\n clearTimeout("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timeout);\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n cb(results);\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(" * "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random());\n },\n createFilter(queryString) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n };\n },\n handleSelect(item) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".links = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loadAll();\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Resizable for entering multiple lines of text information. Add attribute "),a("code",{pre:!0},[s._v('type="textarea"')]),s._v(" to change "),a("code",{pre:!0},[s._v("input")]),s._v(" into native "),a("code",{pre:!0},[s._v("textarea")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autosize-textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autosize Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Setting the "),a("code",{pre:!0},[s._v("autosize")]),s._v(" prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to "),a("code",{pre:!0},[s._v("autosize")]),s._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mixed-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Mixed input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("Same as the "),a("code",{pre:!0},[s._v("type")]),s._v(" attribute of native input, except that it can be "),a("code",{pre:!0},[s._v("textarea")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("maximum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("minimum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder of Input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Input is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input, works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is not 'textarea'")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("prefix icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("suffix-icon")]),a("td",[s._v("suffix icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("number of rows of textarea, only works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'textarea'")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("whether textarea has an adaptive height, only works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean/object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("auto-complete")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("on/off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("readonly")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("max")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("min")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("step")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("control the resizability")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("autofocus")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("form")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("prefix")]),a("td",[s._v("content as Input prefix")])]),a("tr",[a("td",[s._v("suffix")]),a("td",[s._v("content as Input suffix")])]),a("tr",[a("td",[s._v("prepend")]),a("td",[s._v("content to prepend before Input")])]),a("tr",[a("td",[s._v("append")]),a("td",[s._v("content to append after Input")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the icon inside Input value change")]),a("td",[s._v("(value: string | number)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("the placeholder of Autocomplete")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Autocomplete is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("fetch-suggestions")]),a("td",[s._v("a method to fetch input suggestions. When suggestions are ready, invoke "),a("code",{pre:!0},[s._v("callback(data:[])")]),s._v(" to return them to Autocomplete")]),a("td",[s._v("Function(queryString, callback)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for autocomplete's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("trigger-on-focus")]),a("td",[s._v("whether show suggestions when input focus")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("select-when-unmatched")]),a("td",[s._v("whether to emit a "),a("code",{pre:!0},[s._v("select")]),s._v(" event on enter when there is no autocomplete match")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of option object is used as the option's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("specify which key of option object is used as the option's value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when a suggestion is clicked")]),a("td",[s._v("suggestion being clicked")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(997)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(998),l=a(0),n=l(null,e.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"installation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Installation")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm")]),a("p",[s._v("Installing with npm is recommended and it works seamlessly with "),a("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(".")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-shell"}},[s._v("npm i element-ui@next -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),a("p",[s._v("Get the latest version from "),a("a",{attrs:{href:"https://unpkg.com/element-ui@next/"}},[s._v("unpkg.com/element-ui")]),s._v(" , and import JavaScript and CSS file in your page.")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import CSS --\x3e")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("link")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rel")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"stylesheet"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui@next/lib/theme-chalk/index.css"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import JavaScript --\x3e")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui@next/lib/index.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),a("p",[s._v("If you are using CDN, a hello-world page is easy with Element. "),a("a",{attrs:{href:"https://jsfiddle.net/leopoldthecuber/hzfpyvg6/1/"}},[s._v("Online Demo")])]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-meta"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("html")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("head")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("meta")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("charset")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import CSS --\x3e")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("link")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("rel")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"stylesheet"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("href")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui@next/lib/theme-chalk/index.css"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("body")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"app"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"visible = true"')]),s._v(">")]),s._v("Button"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":visible.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"visible"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Hello world"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Try Element"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import Vue before Element --\x3e")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- import JavaScript --\x3e")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://unpkg.com/element-ui@next/lib/index.js"')]),s._v(">")]),a("span",{attrs:{class:"undefined"}}),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"actionscript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n el: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n data: "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" ")]),s._v("{\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" { visible: "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(" }\n }\n })\n ")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),a("p",[s._v("If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.")])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1e3)},function(s,t,a){"use strict";function e(s){a(1001)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1003),n=a(0),r=e,v=n(null,l.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var e=a(1002);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("a5269a9c",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Quickly and easily create layouts with the basic 24-column.")]),s._m(1),a("p",[s._v("Create basic grid layout using columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n    \n\n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("With "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("col")]),s._v(", we can easily manipulate the layout using the "),a("code",[s._v("span")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"24"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Column spacing is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row provides "),a("code",[s._v("gutter")]),s._v(" attribute to specify spacings between columns, and its default value is 0.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"16"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can specify column offsets.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n    \n\n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can specify the number of column offset by setting the value of "),a("code",[s._v("offset")]),s._v(" attribute of Col.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":gutter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":offset")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use the flex layout to make flexible alignment of columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can enable flex layout by setting "),a("code",[s._v("type")]),s._v(" attribute to 'flex', and define the layout of child elements by setting "),a("code",[s._v("justify")]),s._v(" attribute with start, center, end, space-between or space-around.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"center"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"space-between"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"flex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"row-bg"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("justify")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"space-around"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!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-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":xs")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":sm")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":md")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":lg")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-col")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-dark")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#99a9bf")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d3dce6")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".bg-purple-light")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#e5e9f2")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".grid-content")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("min-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("36px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-spacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column spacing")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hybrid-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hybrid layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"responsive-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Responsive Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("grid spacing")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("layout mode, you can use flex, works in modern browsers")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("horizontal alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("vertical alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("custom element tag")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("number of column the grid spans")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("24")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("number of spacing on the left side of the grid")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("number of columns that grid moves to the right")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("number of columns that grid moves to the left")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",{pre:!0},[s._v("<768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",{pre:!0},[s._v("≥768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",{pre:!0},[s._v("≥992")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",{pre:!0},[s._v("≥1200")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("custom element tag")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1005)},function(s,t,a){"use strict";function e(s){a(1006)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1008),n=a.n(l),r=a(1009),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1007);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("045e4754",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".demo-loading .el-table{border:none}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var s=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){s.close()},2e3)}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Show animation while loading data.")]),s._m(1),a("p",[s._v("Displays animation in a container (such as a table) while loading data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading: true\n };\n }\n };\n",style:"\n body {\n margin: 0;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),a("code",[s._v("v-loading")]),s._v(", you just need to bind a "),a("code",[s._v("boolean")]),s._v(" value to it. By default, the loading mask will append to the element where the directive is used. Adding the "),a("code",[s._v("body")]),s._v(" modifier makes the mask append to the body element.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("body")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loading")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize loading text, loading spinner and background color.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Add attribute "),a("code",[s._v("element-loading-text")]),s._v(" to the element on which "),a("code",[s._v("v-loading")]),s._v(" is bound, and its value will be displayed under the spinner. Similarly, "),a("code",[s._v("element-loading-spinner")]),s._v(" and "),a("code",[s._v("element-loading-background")]),s._v(" are for customizing loading spinner class name and background color.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"loading2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("element-loading-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Loading..."')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("element-loading-spinner")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-loading"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("element-loading-background")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"rgba(0, 0, 0, 0.8)"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'John Smith'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loading2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Show a full screen animation while loading data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n fullscreenLoading: false\n }\n },\n methods: {\n openFullScreen() {\n this.fullscreenLoading = true;\n setTimeout(() => {\n this.fullscreenLoading = false;\n }, 2000);\n },\n openFullScreen2() {\n const loading = this.$loading({\n lock: true,\n text: 'Loading',\n spinner: 'el-icon-loading',\n background: 'rgba(0, 0, 0, 0.7)'\n });\n setTimeout(() => {\n loading.close();\n }, 2000);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:s.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:s.openFullScreen}},[s._v("\n As a directive\n ")]),a("el-button",{attrs:{type:"primary"},on:{click:s.openFullScreen2}},[s._v("\n As a service\n ")])]],2),a("p",[s._v("When used as a directive, a full screen Loading requires the "),a("code",[s._v("fullscreen")]),s._v(" modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier "),a("code",[s._v("lock")]),s._v(". When used as a service, Loading will be full screen by default.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"openFullScreen"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n As a directive\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"openFullScreen2"')]),s._v(">")]),s._v("\n As a service\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreenLoading")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openFullScreen() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(");\n },\n openFullScreen2() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" loading = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$loading({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("lock")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("spinner")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'el-icon-loading'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("background")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'rgba(0, 0, 0, 0.7)'")]),s._v("\n });\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n loading.close();\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("2000")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can also invoke Loading with a service. Import Loading service:")]),s._m(5),a("p",[s._v("Invoke it:")]),s._m(6),s._m(7),s._m(8),a("p",[s._v("Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-inside-a-container"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading inside a container")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customization")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"full-screen-loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Full screen loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"service"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[s._v("¶")]),s._v(" Service")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Loading } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[s._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The parameter "),a("code",{pre:!0},[s._v("options")]),s._v(" is the configuration of Loading, and its details can be found in the following table. "),a("code",{pre:!0},[s._v("LoadingService")]),s._v(" returns a Loading instance, and you can close it by invoking its "),a("code",{pre:!0},[s._v("close")]),s._v(" method:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fullscreen")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" });\n"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Calling the "),a("code",{pre:!0},[s._v("close")]),s._v(" method on any one of them can close this full screen Loading.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is imported entirely, a globally method "),a("code",{pre:!0},[s._v("$loading")]),s._v(" will be registered to Vue.prototype. You can invoke it like this: "),a("code",{pre:!0},[s._v("this.$loading(options)")]),s._v(", and it also returns a Loading instance.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._v("the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to "),a("code",{pre:!0},[s._v("document.querySelector")]),s._v(" to get the corresponding DOM node")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("same as the "),a("code",{pre:!0},[s._v("body")]),s._v(" modifier of "),a("code",{pre:!0},[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("same as the "),a("code",{pre:!0},[s._v("fullscreen")]),s._v(" modifier of "),a("code",{pre:!0},[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("same as the "),a("code",{pre:!0},[s._v("lock")]),s._v(" modifier of "),a("code",{pre:!0},[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("loading text that displays under the spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("spinner")]),a("td",[s._v("class name of the custom spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("background")]),a("td",[s._v("background color of the mask")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Loading")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1011)},function(s,t,a){"use strict";function e(s){a(1012)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1014),n=a.n(l),r=a(1015),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1013);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("6c40d961",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Menu that provides navigation for your website.")]),s._m(1),a("p",[s._v("Top bar NavMenu can be used in a variety of scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Processing Center\n \n \n item one\n item two\n item three\n \n Orders\n\n
    \n\n Processing Center\n \n \n item one\n item two\n item three\n \n Orders\n\n\n\n',script:"\n export default {\n data() {\n return {\n activeIndex: '1',\n activeIndex2: '1'\n };\n },\n methods: {\n handleSelect(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1)],1),a("p",[s._v("By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides "),a("code",[s._v("background-color")]),s._v(", "),a("code",[s._v("text-color")]),s._v(" and "),a("code",[s._v("active-text-color")]),s._v(" to customize the colors.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"activeIndex"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("mode")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),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("Orders"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"line"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"activeIndex2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("mode")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@select")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelect"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("background-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#545c64"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#fff"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active-text-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),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("Orders"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeIndex")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeIndex2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleSelect(key, keyPath) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Vertical NavMenu with sub-menus.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Default colors
    \n \n \n \n \n item one\n item one\n \n \n item three\n \n \n \n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n \n     \n \n
    Custom colors
    \n \n \n \n \n item one\n item one\n \n \n item three\n \n \n \n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n \n     \n    \n\n\n',script:"\n export default {\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:12}},[a("h5",[s._v("Default colors")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-message"}),a("span",[s._v("Navigator One")])]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",[s._v("Navigator Two")])]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),a("span",[s._v("Navigator Three")])])],1)],1),a("el-col",{attrs:{span:12}},[a("h5",[s._v("Custom colors")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-message"}),a("span",[s._v("Navigator One")])]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",[s._v("Navigator Two")])]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),a("span",[s._v("Navigator Three")])])],1)],1)],1)],1),a("p",[s._v("You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-row")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tac"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("Default colors"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-col")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":span")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("h5")]),s._v(">")]),s._v("Custom colors"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("background-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#545c64"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#fff"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active-text-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Navigator Three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Vertical NavMenu could be collapsed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n expand\n collapse\n\n\n \n \n \n Group One\n item one\n item two\n \n \n item three\n \n \n item four\n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n isCollapse: true\n };\n },\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:"\n .el-menu-vertical-demo:not(.el-menu--collapse) {\n width: 200px;\n min-height: 400px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:s.isCollapse,callback:function(t){s.isCollapse=t},expression:"isCollapse"}},[a("el-radio-button",{attrs:{label:!1}},[s._v("expand")]),a("el-radio-button",{attrs:{label:!0}},[s._v("collapse")])],1),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:s.isCollapse},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{attrs:{slot:"title"},slot:"title"},[a("i",{staticClass:"el-icon-message"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator One")])]),a("el-menu-item-group",[a("span",{attrs:{slot:"title"},slot:"title"},[s._v("Group One")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("span",{attrs:{slot:"title"},slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],1)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator Two")])]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),a("span",{attrs:{slot:"title"},slot:"title"},[s._v("Navigator Three")])])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"isCollapse"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("expand"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(">")]),s._v("collapse"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@open")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleOpen"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":collapse")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"isCollapse"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Group One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-2"')]),s._v(">")]),s._v("item two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-submenu")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator Two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-menu-item")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("index")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"title"')]),s._v(">")]),s._v("Navigator Three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-menu-vertical-demo")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":not(.el-menu--collapse)")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("min-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("400px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("isCollapse")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"top-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Top bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"side-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Side bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("menu display mode")]),a("td",[s._v("string")]),a("td",[s._v("horizontal/vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("collapse")]),a("td",[s._v("whether the menu is collapsed (available only in vertical mode)")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("background-color")]),a("td",[s._v("background color of Menu (hex format)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("text color of Menu (hex format)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#2d2f33")])]),a("tr",[a("td",[s._v("active-text-color")]),a("td",[s._v("text color of currently active menu item (hex format)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])]),a("tr",[a("td",[s._v("theme")]),a("td",[s._v("theme color")]),a("td",[s._v("string")]),a("td",[s._v("light/dark")]),a("td",[s._v("light")])]),a("tr",[a("td",[s._v("default-active")]),a("td",[s._v("index of currently active menu")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-openeds")]),a("td",[s._v("array that contains keys of currently active sub-menus")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unique-opened")]),a("td",[s._v("whether only one sub-menu can be active")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-trigger")]),a("td",[s._v("how sub-menus are triggered, only works when "),a("code",{pre:!0},[s._v("mode")]),s._v(" is 'horizontal'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("router")]),a("td",[s._v("whether "),a("code",{pre:!0},[s._v("vue-router")]),s._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("open a specific sub-menu")]),a("td",[s._v("index: index of the sub-menu to open")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("close a specific sub-menu")]),a("td",[s._v("index: index of the sub-menu to close")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("callback function when menu is activated")]),a("td",[s._v("index: index of activated menu, indexPath: index path of activated menu")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("callback function when sub-menu expands")]),a("td",[s._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("callback function when sub-menu collapses")]),a("td",[s._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("callback function when menu-item is clicked")]),a("td",[s._v("el: menu-item instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"submenu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("route")]),a("td",[s._v("Vue Router object")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-group-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("group title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1017)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(1018),l=a.n(e),n=a(1019),r=a(0),v=r(l.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";t.__esModule=!0,t.default={methods:{open:function(){var s=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"Delete completed",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"Delete canceled",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("Please input your email","Tips",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"Your email is:"+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"Input canceled"})},200)})},open4:function(){var s=this,t=this.$createElement;this.$msgbox({title:"Message",message:t("p",null,[t("span",null,"Message can be "),t("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(s,t,a){"confirm"===s?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})},open5:function(){this.$alert("This is HTML string","HTML String",{dangerouslyUseHTMLString:!0})},open6:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){s.$message({type:"success",message:"Delete completed"})}).catch(function(){s.$message({type:"info",message:"Delete canceled"})})}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.")]),s._m(1),s._m(2),a("p",[s._v("Alert interrupts user operation until the user confirms.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$alert('This is a message', 'Title', {\n confirmButtonText: 'OK',\n callback: action => {\n this.$message({\n type: 'info',\n message: `action: ${ action }`\n });\n }\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Open an alert by calling the "),a("code",[s._v("$alert")]),s._v(" method. It simulates the system's "),a("code",[s._v("alert")]),s._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),a("code",[s._v("message")]),s._v(" and "),a("code",[s._v("title")]),s._v(" are received. It is worth mentioning that when the box is closed, it returns a "),a("code",[s._v("Promise")]),s._v(" object for further processing. If you are not sure if your target browsers support "),a("code",[s._v("Promise")]),s._v(", you should import a third party polyfill or use callbacks instead like this example.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Title'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("callback")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`action: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${ action }")]),s._v("`")]),s._v("\n });\n }\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Confirm is used to ask users' confirmation.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open2() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning'\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n }); \n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$confirm")]),s._v(" method to open a confirm, and it simulates the system's "),a("code",[s._v("confirm")]),s._v(". We can also highly customize Message Box by passing a third attribute "),a("code",[s._v("options")]),s._v(" which is a literal object. The attribute "),a("code",[s._v("type")]),s._v(" indicates the message type, and it's value can be "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("error")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("warning")]),s._v(". Note that the second attribute "),a("code",[s._v("title")]),s._v(" must be a "),a("code",[s._v("string")]),s._v(", and if it is an "),a("code",[s._v("object")]),s._v(", it will be handled as the attribute "),a("code",[s._v("options")]),s._v(". Here we use "),a("code",[s._v("Promise")]),s._v(" to handle further processing.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open2() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n }).then("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Delete completed'")]),s._v("\n });\n }).catch("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Delete canceled'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Prompt is used when user input is required.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$prompt('Please input your e-mail', 'Tip', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n inputErrorMessage: 'Invalid Email'\n }).then(value => {\n this.$message({\n type: 'success',\n message: 'Your email is:' + value\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Input canceled'\n }); \n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$prompt")]),s._v(" method to open a prompt, and it simulates the system's "),a("code",[s._v("prompt")]),s._v(". You can use "),a("code",[s._v("inputPattern")]),s._v(" parameter to specify your own RegExp pattern. Use "),a("code",[s._v("inputValidator")]),s._v(" to specify validation method, and it should return "),a("code",[s._v("Boolean")]),s._v(" or "),a("code",[s._v("String")]),s._v(". Returning "),a("code",[s._v("false")]),s._v(" or "),a("code",[s._v("String")]),s._v(" means the validation has failed, and the string returned will be used as the "),a("code",[s._v("inputErrorMessage")]),s._v(". In addition, you can customize the placeholder of the input box with "),a("code",[s._v("inputPlaceholder")]),s._v(" parameter.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open3() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$prompt("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Please input your e-mail'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tip'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inputPattern")]),s._v(": "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inputErrorMessage")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Invalid Email'")]),s._v("\n }).then("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("value")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Your email is:'")]),s._v(" + value\n });\n }).catch("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Input canceled'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Can be customized to show various content.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open4() {\n const h = this.$createElement;\n this.$msgbox({\n title: 'Message',\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ]),\n showCancelButton: true,\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n beforeClose: (action, instance, done) => {\n if (action === 'confirm') {\n instance.confirmButtonLoading = true;\n instance.confirmButtonText = 'Loading...';\n setTimeout(() => {\n done();\n setTimeout(() => {\n instance.confirmButtonLoading = false;\n }, 300);\n }, 3000);\n } else {\n done();\n }\n }\n }).then(action => {\n this.$message({\n type: 'info',\n message: 'action: ' + action\n });\n });\n },\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("The three methods mentioned above are repackagings of the "),a("code",[s._v("$msgbox")]),s._v(" method. This example calls "),a("code",[s._v("$msgbox")]),s._v(" method directly using the "),a("code",[s._v("showCancelButton")]),s._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),a("code",[s._v("cancelButtonClass")]),s._v(" to add a custom style and "),a("code",[s._v("cancelButtonText")]),s._v(" to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the "),a("code",[s._v("beforeClose")]),s._v(" attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: "),a("code",[s._v("action")]),s._v(", "),a("code",[s._v("instance")]),s._v(" and "),a("code",[s._v("done")]),s._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),a("code",[s._v("loading")]),s._v(" for confirm button; you can invoke the "),a("code",[s._v("done")]),s._v(" method to close the MessageBox instance (if "),a("code",[s._v("done")]),s._v(" is not called inside "),a("code",[s._v("beforeClose")]),s._v(", the instance will not be closed).")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open4() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$msgbox({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message can be '")]),s._v("),\n h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),a("span",{attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n ]),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showCancelButton")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("beforeClose")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(") {\n instance.confirmButtonLoading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n instance.confirmButtonText = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Loading...'")]),s._v(";\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n done();\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n instance.confirmButtonLoading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("300")]),s._v(");\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("3000")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n done();\n }\n }\n }).then("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'action: '")]),s._v(" + action\n });\n });\n },\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$alert('This is HTML string', 'HTML String', {\n dangerouslyUseHTMLString: true\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open5}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Set "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" to true and "),a("code",[s._v("message")]),s._v(" will be treated as an HTML string.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open5() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$alert("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is HTML string'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'HTML String'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),a("p",[s._v("Content of MessageBox can be centered.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open6() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning',\n center: true\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n });\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open6}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Setting "),a("code",[s._v("center")]),s._v(" to "),a("code",[s._v("true")]),s._v(" will center the content")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open6() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$confirm("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("confirmButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'OK'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cancelButtonText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Cancel'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }).then("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Delete completed'")]),s._v("\n });\n }).catch("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Delete canceled'")]),s._v("\n });\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("By design MessageBox provides simulations of system's "),a("code",{pre:!0},[s._v("alert")]),s._v(", "),a("code",{pre:!0},[s._v("confirm")]),s._v(" and "),a("code",{pre:!0},[s._v("prompt")]),s._v("，so it's content should be simple. For more complicated contents, please use Dialog.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"confirm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[s._v("¶")]),s._v(" Confirm")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prompt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prompt")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customization")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"use-html-string"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use HTML String")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" supports HTML string.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("Although "),a("code",{pre:!0},[s._v("message")]),s._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",{pre:!0},[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",{pre:!0},[s._v("message")]),s._v(" to user-provided content.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"centered-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is fully imported, it will add the following global methods for Vue.prototype: "),a("code",{pre:!0},[s._v("$msgbox")]),s._v(", "),a("code",{pre:!0},[s._v("$alert")]),s._v(", "),a("code",{pre:!0},[s._v("$confirm")]),s._v(" and "),a("code",{pre:!0},[s._v("$prompt")]),s._v(". So in a Vue instance you can call "),a("code",{pre:!0},[s._v("MessageBox")]),s._v(" like what we did in this page. The parameters are:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("$msgbox(options)")])]),a("li",[a("code",{pre:!0},[s._v("$alert(message, title, options)")]),s._v(" or "),a("code",{pre:!0},[s._v("$alert(message, options)")])]),a("li",[a("code",{pre:!0},[s._v("$confirm(message, title, options)")]),s._v(" or "),a("code",{pre:!0},[s._v("$confirm(message, options)")])]),a("li",[a("code",{pre:!0},[s._v("$prompt(message, title, options)")]),s._v(" or "),a("code",{pre:!0},[s._v("$prompt(message, options)")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If you prefer importing "),a("code",{pre:!0},[s._v("MessageBox")]),s._v(" on demand:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { MessageBox } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The corresponding methods are: "),a("code",{pre:!0},[s._v("MessageBox")]),s._v(", "),a("code",{pre:!0},[s._v("MessageBox.alert")]),s._v(", "),a("code",{pre:!0},[s._v("MessageBox.confirm")]),s._v(" and "),a("code",{pre:!0},[s._v("MessageBox.prompt")]),s._v(". The parameters are the same as above.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("content of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("whether "),a("code",{pre:!0},[s._v("message")]),s._v(" is treated as HTML string")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type, used for icon display")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("callback")]),a("td",[s._v("MessageBox closing callback if you don't prefer Promise")]),a("td",[s._v("function(action), where action can be 'confirm' or 'cancel', and "),a("code",{pre:!0},[s._v("instance")]),s._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),a("td",[s._v("function(action, instance, done), where "),a("code",{pre:!0},[s._v("action")]),s._v(" can be 'confirm' or 'cancel'; "),a("code",{pre:!0},[s._v("instance")]),s._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),a("code",{pre:!0},[s._v("done")]),s._v(" is for closing the instance")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lockScroll")]),a("td",[s._v("whether to lock body scroll when MessageBox prompts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showCancelButton")]),a("td",[s._v("whether to show a cancel button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with confirm and prompt)")])]),a("tr",[a("td",[s._v("showConfirmButton")]),a("td",[s._v("whether to show a confirm button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("cancelButtonText")]),a("td",[s._v("text content of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Cancel")])]),a("tr",[a("td",[s._v("confirmButtonText")]),a("td",[s._v("text content of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OK")])]),a("tr",[a("td",[s._v("cancelButtonClass")]),a("td",[s._v("custom class name of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("confirmButtonClass")]),a("td",[s._v("custom class name of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closeOnClickModal")]),a("td",[s._v("whether MessageBox can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("closeOnPressEscape")]),a("td",[s._v("whether MessageBox can be closed by pressing the ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("closeOnHashChange")]),a("td",[s._v("whether to close MessageBox when hash changes")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showInput")]),a("td",[s._v("whether to show an input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with prompt)")])]),a("tr",[a("td",[s._v("inputPlaceholder")]),a("td",[s._v("placeholder of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValue")]),a("td",[s._v("initial value of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputPattern")]),a("td",[s._v("regexp for the input")]),a("td",[s._v("regexp")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValidator")]),a("td",[s._v("validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputErrorMessage")]),a("td",[s._v("error message when validation fails")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Illegal input")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to align the content in center")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("roundButton")]),a("td",[s._v("whether to use round button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1021)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(1022),l=a.n(e),n=a(1023),r=a(0),v=r(l.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";s.exports={methods:{open:function(){this.$message("This is a message.")},openVn:function(){var s=this.$createElement;this.$message({message:s("p",null,[s("span",null,"Message can be "),s("i",{style:"color: teal"},"VNode")])})},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")},open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})},openCenter:function(){this.$message({message:"Centered text",center:!0})},openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"This is HTML string"})}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.")]),s._m(1),a("p",[s._v("Displays at the top, and disappears after 3 seconds.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('This is a message.');\n },\n \n openVn() {\n const h = this.$createElement;\n this.$message({\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ])\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("Show message")]),a("el-button",{attrs:{plain:!0},on:{click:s.openVn}},[s._v("VNode")])]],2),a("p",[s._v("The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a "),a("code",[s._v("$message")]),s._v(" method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("Show message"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"openVn"')]),s._v(">")]),s._v("VNode"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v(");\n },\n \n openVn() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", [\n h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'span'")]),s._v(", "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Message can be '")]),s._v("),\n h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),a("span",{attrs:{class:"hljs-string"}},[s._v("'VNode'")]),s._v(")\n ])\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('This is a message.');\n },\n open2() {\n this.$message({\n message: 'Congrats, this is a success message.',\n type: 'success'\n });\n },\n\n open3() {\n this.$message({\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open4() {\n this.$message.error('Oops, this is a error message.');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("error")])]],2),a("p",[s._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),a("code",[s._v("type")]),s._v(" can define different types, and its default is "),a("code",[s._v("info")]),s._v(". In such cases the main body is passed in as the value of "),a("code",[s._v("message")]),s._v(". Also, we have registered methods for different types, so you can directly call it without passing a type like "),a("code",[s._v("open4")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("message"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("error"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message("),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v(");\n },\n open2() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open3() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open4() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Oops, this is a error message.'")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("A close button can be added.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$message({\n showClose: true,\n message: 'This is a message.'\n });\n },\n\n open6() {\n this.$message({\n showClose: true,\n message: 'Congrats, this is a success message.',\n type: 'success'\n });\n },\n\n open7() {\n this.$message({\n showClose: true,\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open8() {\n this.$message({\n showClose: true,\n message: 'Oops, this is a error message.',\n type: 'error'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("error")])]],2),a("p",[s._v("A default Message cannot be closed manually. If you need a closable message, you can set "),a("code",[s._v("showClose")]),s._v(" field. Besides, same as notification, message has a controllable "),a("code",[s._v("duration")]),s._v(". Default duration is 3000 ms, and it won't disappear when set to "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("message"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("success"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("warning"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open8"')]),s._v(">")]),s._v("error"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open5() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message.'")]),s._v("\n });\n },\n\n open6() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open7() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open8() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Oops, this is a error message.'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'error'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n openCenter() {\n this.$message({\n message: 'Centered text',\n center: true\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.openCenter}},[s._v("Centered text")])]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"openCenter"')]),s._v(">")]),s._v("Centered text"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openCenter() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Centered text'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("center")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n openHTML() {\n this.$message({\n dangerouslyUseHTMLString: true,\n message: 'This is HTML string'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.openHTML}},[s._v("Use HTML String")])]],2),a("p",[s._v("Set "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" to true and "),a("code",[s._v("message")]),s._v(" will be treated as an HTML string.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":plain")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"openHTML"')]),s._v(">")]),s._v("Use HTML String"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n openHTML() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is HTML string'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"closable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Closable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"centered-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use the "),a("code",{pre:!0},[s._v("center")]),s._v(" attribute to center the text.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"use-html-string"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use HTML string")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" supports HTML string.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("Although "),a("code",{pre:!0},[s._v("message")]),s._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",{pre:!0},[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",{pre:!0},[s._v("message")]),s._v(" to user-provided content.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",{pre:!0},[s._v("$message")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",{pre:!0},[s._v("Message")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",{pre:!0},[s._v("Message")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Message } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",{pre:!0},[s._v("Message(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",{pre:!0},[s._v("Message.success(options)")]),s._v(".\nYou can call "),a("code",{pre:!0},[s._v("Message.closeAll()")]),s._v(" to manually close all the instances.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("message text")]),a("td",[s._v("string / VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class, overrides "),a("code",{pre:!0},[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Message")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to center the text")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed with the message instance as the parameter")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Message")]),s._v(" and "),a("code",{pre:!0},[s._v("this.$message")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",{pre:!0},[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Message")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1025)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(1026),l=a.n(e),n=a(1027),r=a(0),v=r(l.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"Title",message:s("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})},open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})},open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})},open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})},open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"This is HTML string"})},open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})},onClose:function(){console.log("Notification is closed")}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays a global notification message at a corner of the page.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n const h = this.$createElement;\n\n this.$notify({\n title: 'Title',\n message: h('i', { style: 'color: teal' }, 'This is a reminder')\n });\n },\n\n open2() {\n this.$notify({\n title: 'Prompt',\n message: 'This is a message that does not automatically close',\n duration: 0\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n Closes automatically\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n Won't close automatically\n ")])]],2),a("p",[s._v("Element has registered the "),a("code",[s._v("$notify")]),s._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),a("code",[s._v("title")]),s._v(" field and the"),a("code",[s._v("message")]),s._v(" field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting "),a("code",[s._v("duration")]),s._v(" you can control its duration. Specifically, if set to "),a("code",[s._v("0")]),s._v(", it will not close automatically. Note that "),a("code",[s._v("duration")]),s._v(" receives a "),a("code",[s._v("Number")]),s._v(" in milliseconds.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open"')]),s._v(">")]),s._v("\n Closes automatically\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open2"')]),s._v(">")]),s._v("\n Won't close automatically\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" h = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createElement;\n\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Title'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": h("),a("span",{attrs:{class:"hljs-string"}},[s._v("'i'")]),s._v(", { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'color: teal'")]),s._v(" }, "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a reminder'")]),s._v(")\n });\n },\n\n open2() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Prompt'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message that does not automatically close'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("duration")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("We provide four types: success, warning, info and error.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$notify({\n title: 'Success',\n message: 'This is a success message',\n type: 'success'\n });\n },\n\n open4() {\n this.$notify({\n title: 'Warning',\n message: 'This is a warning message',\n type: 'warning'\n });\n },\n\n open5() {\n this.$notify.info({\n title: 'Info',\n message: 'This is an info message'\n });\n },\n\n open6() {\n this.$notify.error({\n title: 'Error',\n message: 'This is an error message'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n Success\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n Warning\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n Info\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n Error\n ")])]],2),a("p",[s._v("Element provides four notification types: "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("warning")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("error")]),s._v(". They are set by the "),a("code",[s._v("type")]),s._v(" field, and other values will be ignored. We also registered methods for these types that can be invoked directly like "),a("code",[s._v("open5")]),s._v(" and "),a("code",[s._v("open6")]),s._v(" without passing a "),a("code",[s._v("type")]),s._v(" field.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open3"')]),s._v(">")]),s._v("\n Success\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open4"')]),s._v(">")]),s._v("\n Warning\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open5"')]),s._v(">")]),s._v("\n Info\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open6"')]),s._v(">")]),s._v("\n Error\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open3() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Success'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a success message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v("\n });\n },\n\n open4() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Warning'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a warning message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v("\n });\n },\n\n open5() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.info({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is an info message'")]),s._v("\n });\n },\n\n open6() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.error({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Error'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is an error message'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Notification can emerge from any corner you like.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open7() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top right corner'\n });\n },\n\n open8() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom right corner',\n position: 'bottom-right'\n });\n },\n\n open9() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom left corner',\n position: 'bottom-left'\n });\n },\n\n open10() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top left corner',\n position: 'top-left'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n Top Right\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open8}},[s._v("\n Bottom Right\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open9}},[s._v("\n Bottom Left\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open10}},[s._v("\n Top Left\n ")])]],2),a("p",[s._v("The "),a("code",[s._v("position")]),s._v(" attribute defines which corner Notification slides in. It can be "),a("code",[s._v("top-right")]),s._v(", "),a("code",[s._v("top-left")]),s._v(", "),a("code",[s._v("bottom-right")]),s._v(" or "),a("code",[s._v("bottom-left")]),s._v(". Defaults to "),a("code",[s._v("top-right")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open7"')]),s._v(">")]),s._v("\n Top Right\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open8"')]),s._v(">")]),s._v("\n Bottom Right\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open9"')]),s._v(">")]),s._v("\n Bottom Left\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open10"')]),s._v(">")]),s._v("\n Top Left\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open7() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the top right corner'")]),s._v("\n });\n },\n\n open8() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the bottom right corner'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'bottom-right'")]),s._v("\n });\n },\n\n open9() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the bottom left corner'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'bottom-left'")]),s._v("\n });\n },\n\n open10() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'I\\'m at the top left corner'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("position")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top-left'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Customize Notification's offset from the edge of the screen.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open11() {\n this.$notify.success({\n title: 'Success',\n message: 'This is a success message',\n offset: 100\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open11}},[s._v("\n Notification with offset\n ")])]],2),a("p",[s._v("Set the "),a("code",[s._v("offset")]),s._v(" attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open11"')]),s._v(">")]),s._v("\n Notification with offset\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open11() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.success({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Success'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a success message'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("offset")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open12() {\n this.$notify({\n title: 'HTML String',\n dangerouslyUseHTMLString: true,\n message: 'This is HTML string'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open12}},[s._v("\n Use HTML String\n ")])]],2),a("p",[s._v("Set "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" to true and "),a("code",[s._v("message")]),s._v(" will be treated as an HTML string.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open12"')]),s._v(">")]),s._v("\n Use HTML String\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open12() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'HTML String'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is HTML string'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("p",[s._v("It is possible to hide the close button")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open13() {\n this.$notify.success({\n title: 'Info',\n message: 'This is a message without close button',\n showClose: false\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open13}},[s._v("\n Hide close button\n ")])]],2),a("p",[s._v("Set the "),a("code",[s._v("showClose")]),s._v(" attribute to "),a("code",[s._v("false")]),s._v(" so the notification cannot be closed by the user.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("plain")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"open13"')]),s._v(">")]),s._v("\n Hide close button\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n open13() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$notify.success({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Info'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("message")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'This is a message without close button'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showClose")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n });\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" With types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-position"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-position","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom position")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" With offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"use-html-string"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use HTML string")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("message")]),s._v(" supports HTML string.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("Although "),a("code",{pre:!0},[s._v("message")]),s._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",{pre:!0},[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",{pre:!0},[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",{pre:!0},[s._v("message")]),s._v(" to user-provided content.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hide-close-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hide-close-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hide close button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",{pre:!0},[s._v("$notify")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",{pre:!0},[s._v("Notification")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",{pre:!0},[s._v("Notification")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Notification } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",{pre:!0},[s._v("Notification(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",{pre:!0},[s._v("Notification.success(options)")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("description text")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("whether "),a("code",{pre:!0},[s._v("message")]),s._v(" is treated as HTML string")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("notification type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class. It will be overridden by "),a("code",{pre:!0},[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Notification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("duration before close. It will not automatically close if set 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function when notification clicked")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Notification")]),s._v(" and "),a("code",{pre:!0},[s._v("this.$notify")]),s._v(" returns the current Notification instance. To manually close the instance, you can call "),a("code",{pre:!0},[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Notification")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1029)},function(s,t,a){"use strict";function e(s){a(1030)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1032),n=a.n(l),r=a(1033),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1031);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("d9e1f8f8",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=a(4);t.default={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+" items per page")},handleCurrentChange:function(s){console.log("current page: "+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,e.addClass)(t,"first"),(0,e.addClass)(a,"last")})}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If you have too much data to display in one page, use pagination.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n When you have few pages\n \n \n
    \n
    \n When you have more than 7 pages\n \n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have few pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have more than 7 pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("Set "),a("code",[s._v("layout")]),s._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),a("code",[s._v("prev")]),s._v(" (a button navigating to the previous page), "),a("code",[s._v("next")]),s._v(" (a button navigating to the next page), "),a("code",[s._v("pager")]),s._v(" (page list), "),a("code",[s._v("jumper")]),s._v(" (a jump-to input), "),a("code",[s._v("total")]),s._v(" (total item count), "),a("code",[s._v("size")]),s._v(" (a select to determine page size) and "),a("code",[s._v("->")]),s._v("(every element after this symbol will be pulled to the right).")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have few pages"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have more than 7 pages"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use small pagination in the case of limited space.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("Just set the "),a("code",[s._v("small")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the Pagination becomes smaller.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("small")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add more modules based on your scenario.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n methods: {\n handleSizeChange(val) {\n console.log(`${val} items per page`);\n },\n handleCurrentChange(val) {\n console.log(`current page: ${val}`);\n }\n },\n data() {\n return {\n currentPage1: 5,\n currentPage2: 5,\n currentPage3: 5,\n currentPage4: 4\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Total item count")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Change page size")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage2=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Jump to")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("All combined")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage4=t}}})],1)]],2),a("p",[s._v("This example is a complete use case. It uses "),a("code",[s._v("size-change")]),s._v(" and "),a("code",[s._v("current-change")]),s._v(" event to handle page size changes and current page changes. "),a("code",[s._v("page-sizes")]),s._v(" accepts an array of integers, each of which represents a different page size in the "),a("code",[s._v("sizes")]),s._v(" select options, e.g. "),a("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"total, prev, pager, next"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Change page size"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-sizes")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"sizes, prev, pager, next"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Jump to"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prev, pager, next, jumper"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("All combined"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-pagination")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@size-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":current-page.sync")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"currentPage4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-sizes")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":page-size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("layout")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":total")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"400"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleSizeChange(val) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("`"),a("span",{attrs:{class:"hljs-subst"}},[s._v("${val}")]),s._v(" items per page`")]),s._v(");\n },\n handleCurrentChange(val) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("`current page: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${val}")]),s._v("`")]),s._v(");\n }\n },\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage1")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage2")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("currentPage4")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"small-pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Small Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-elements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[s._v("¶")]),s._v(" More elements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("whether to use small pagination")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("item count of each page")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("total item count")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("total page count. Set either "),a("code",{pre:!0},[s._v("total")]),s._v(" or "),a("code",{pre:!0},[s._v("page-count")]),s._v(" and pages will be displayed; if you need "),a("code",{pre:!0},[s._v("page-sizes")]),s._v(", "),a("code",{pre:!0},[s._v("total")]),s._v(" is required")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("current page number, supports the .sync modifier")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("layout of Pagination, elements separated with a comma")]),a("td",[s._v("string")]),a("td",[a("code",{pre:!0},[s._v("sizes")]),s._v(", "),a("code",{pre:!0},[s._v("prev")]),s._v(", "),a("code",{pre:!0},[s._v("pager")]),s._v(", "),a("code",{pre:!0},[s._v("next")]),s._v(", "),a("code",{pre:!0},[s._v("jumper")]),s._v(", "),a("code",{pre:!0},[s._v("->")]),s._v(", "),a("code",{pre:!0},[s._v("total")]),s._v(", "),a("code",{pre:!0},[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("options of item count per page")]),a("td",[s._v("number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for the page size Select's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prev-text")]),a("td",[s._v("text for the prev button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next-text")]),a("td",[s._v("text for the next button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("triggers when "),a("code",{pre:!0},[s._v("page-size")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",{pre:!0},[s._v("page-size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when "),a("code",{pre:!0},[s._v("current-page")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",{pre:!0},[s._v("current-page")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("custom content. To use this, you need to declare "),a("code",{pre:!0},[s._v("slot")]),s._v(" in "),a("code",{pre:!0},[s._v("layout")])])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1035)},function(s,t,a){"use strict";function e(s){a(1036)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1038),n=a.n(l),r=a(1039),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1037);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("ff9ddeaa",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".demo-box.demo-popover .el-popover+.el-popover{margin-left:10px}.demo-box.demo-popover .el-input{width:360px}.demo-box.demo-popover .el-button{margin-left:10px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{visible2:!1,gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}],gridData2:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City",$info:!0},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City",$positive:!0}],gridData3:[{tag:"Home",date:"2016-05-03",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-02",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-04",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-01",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-08",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-06",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-07",name:"Jack",address:"New York City"}],singleSelection:{},multipleSelection:[],model:""}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\nHover to activate\nClick to activate\n\n Focus to activate\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("Hover to activate")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("Click to activate")]),a("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[a("el-button",{attrs:{slot:"reference"},slot:"reference"},[s._v("Focus to activate")])],1)],1),a("p",[s._v("Add "),a("code",[s._v("ref")]),s._v(" in your popover, then in your button, use "),a("code",[s._v("v-popover")]),s._v(" directive to link the button and the popover. The attribute "),a("code",[s._v("trigger")]),s._v(" is used to define how popover is triggered: "),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" or "),a("code",[s._v("focus")]),s._v(". Alternatively, you can specify reference using a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"popover1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top-start"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"popover2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover1")]),s._v(">")]),s._v("Hover to activate"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover2")]),s._v(">")]),s._v("Click to activate"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Title"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"focus"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(">")]),s._v("Focus to activate"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Other components can be nested in popover. Following is an example of nested table.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n\n\nClick to activate\n\n\n',script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-04',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-01',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-03',\n name: 'Jack',\n address: 'New York City'\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("Click to activate")])],1),a("p",[s._v("replace the "),a("code",[s._v("content")]),s._v(" attribute with a default "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"popover4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"400"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover4")]),s._v(">")]),s._v("Click to activate"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("gridData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Jack'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York City'")]),s._v("\n }]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n

    Are you sure to delete this?

    \n
    \n cancel\n confirm\n
    \n    \n\nDelete\n\n\n',script:"\n export default {\n data() {\n return {\n visible2: false,\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-popover",{ref:"popover5",attrs:{placement:"top",width:"160"},model:{value:s.visible2,callback:function(t){s.visible2=t},expression:"visible2"}},[a("p",[s._v("Are you sure to delete this?")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("cancel")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("confirm")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("Delete")])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"popover5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"160"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"visible2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Are you sure to delete this?"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"visible2 = false"')]),s._v(">")]),s._v("cancel"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"visible2 = false"')]),s._v(">")]),s._v("confirm"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-popover:popover5")]),s._v(">")]),s._v("Delete"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("visible2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Similar to Tooltip, Popover is also built with "),a("code",{pre:!0},[s._v("Vue-popper")]),s._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-information"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested information")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-operation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested operation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how the popover is triggered")]),a("td",[s._v("string")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("popover title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("popover content, can be replaced with a default "),a("code",{pre:!0},[s._v("slot")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("popover width")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("Min width 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("popover placement")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Popover is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("whether popover is visible")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("popover offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("popover transition animation")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[s._v("parameters for "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[s._v("object")]),a("td",[s._v("please refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[a("code",{pre:!0},[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for popover")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance when "),a("code",{pre:!0},[s._v("trigger")]),s._v(" is hover, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("text content of popover")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("HTML element that triggers popover")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("triggers when popover shows")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("triggers when popover hides")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1041)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(1042),l=a(0),n=l(null,e.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:100,status:"success"}}),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1),a("p",[s._v("Use "),a("code",[s._v("percentage")]),s._v(" attribute to set the percentage. It's "),a("strong",[s._v("required")]),s._v(" and must be between "),a("code",[s._v("0-100")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In this case the percentage takes no additional space.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),a("p",[a("code",[s._v("stroke-width")]),s._v(" attribute decides the "),a("code",[s._v("width")]),s._v(" of progress bar, and use "),a("code",[s._v("text-inside")]),s._v(" attribute to put description inside the progress bar.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"70"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":text-inside")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":stroke-width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"18"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-progress",{attrs:{type:"circle",percentage:0}}),a("el-progress",{attrs:{type:"circle",percentage:25}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),a("p",[s._v("You can specify "),a("code",[s._v("type")]),s._v(" attribute to "),a("code",[s._v("circle")]),s._v(" to use circular progress bar, and use "),a("code",[s._v("width")]),s._v(" attribute to change the size of circle.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"25"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-progress")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"circle"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":percentage")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"exception"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (external percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (internal percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"circular-progress-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Circular progress bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[s._v("percentage, "),a("strong",[s._v("required")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("the type of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("the width of progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("whether to place the percentage inside progress bar, only works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'line'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("the current status of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("the canvas width of circle progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to show percentage")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1044)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(1045),l=a(0),n=l(null,e.a,!1,null,null,null);t.default=n.exports},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"quick-start"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[s._v("¶")]),s._v(" Quick start")]),a("p",[s._v("This part walks you through the process of using Element in a webpack project.")]),a("h3",{attrs:{id:"use-starter-kit"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use Starter Kit")]),a("p",[s._v("Under construction.")]),a("h3",{attrs:{id:"config-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#config-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Config files")]),a("p",[s._v("Create a new project, and its structure should be")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-text"}},[s._v("|- src/ --------------------- source code\n |- App.vue\n |- main.js -------------- entry\n|- .babelrc ----------------- babel config\n|- index.html --------------- HTML template\n|- package.json ------------- npm config\n|- README.md ---------------- readme\n|- webpack.config.js -------- webpack config\n")])]),a("p",[s._v("Typical configurations for these config files are:")]),a("p",[a("strong",[s._v(".babelrc")])]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-json"}},[s._v("{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"presets"')]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"vue-app"')]),s._v("]\n}\n")])]),a("br"),a("p",[a("strong",[s._v("package.json")])]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-json"}},[s._v("{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"name"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"element-starter"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"scripts"')]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"dev"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"build"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cross-env NODE_ENV=production webpack --progress --hide-modules"')]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"dependencies"')]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"element-ui"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"next"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"vue"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^2.4.2"')]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"devDependencies"')]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"babel-core"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^6.0.0"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"babel-loader"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^6.0.0"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"babel-preset-vue-app"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^1.2.0"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"cross-env"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^1.0.6"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"css-loader"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^0.23.1"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"file-loader"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^0.8.5"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"style-loader"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^0.13.1"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"vue-loader"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^9.8.0"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"webpack"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"beta"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"webpack-dev-server"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"beta"')]),s._v("\n }\n}\n")])]),a("br"),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" path = "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("require")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'path'")]),s._v(")\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" webpack = "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("require")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'webpack'")]),s._v(")\n\n"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports = {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("entry")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'./src/main.js'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("output")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("path")]),s._v(": path.resolve(__dirname, "),a("span",{attrs:{class:"hljs-string"}},[s._v("'./dist'")]),s._v("),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("publicPath")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'/dist/'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filename")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'build.js'")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("module")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loaders")]),s._v(": [\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("test")]),s._v(": "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/\\.vue$/")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loader")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue-loader'")]),s._v("\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("test")]),s._v(": "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/\\.js$/")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loader")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'babel-loader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("exclude")]),s._v(": "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/node_modules/")]),s._v("\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("test")]),s._v(": "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/\\.css$/")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loader")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'style-loader!css-loader'")]),s._v("\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("test")]),s._v(": "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loader")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'file-loader'")]),s._v("\n },\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("test")]),s._v(": "),a("span",{attrs:{class:"hljs-regexp"}},[s._v("/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loader")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'file-loader'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("query")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'[name].[ext]?[hash]'")]),s._v("\n }\n }\n ]\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("devServer")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("historyApiFallback")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("noInfo")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("devtool")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'production'")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports.devtool = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#source-map'")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports.plugins = ("),a("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports.plugins || []).concat([\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" webpack.DefinePlugin({\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'process.env'")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("NODE_ENV")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'\"production\"'")]),s._v("\n }\n }),\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("compress")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("warnings")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n })\n ])\n}\n")])]),a("h3",{attrs:{id:"import-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import Element")]),a("p",[s._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),a("h4",{attrs:{id:"fully-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fully import")]),a("p",[s._v("In main.js:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" ElementUI "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-chalk/index.css'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),a("h4",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")]),a("p",[s._v("With the help of "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v(", we can import components we actually need, making the project smaller than otherwise.")]),a("p",[s._v("First, install babel-plugin-component:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-bash"}},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("Then edit .babelrc:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-json"}},[s._v("{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"presets"')]),s._v(": [\n ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"es2015"')]),s._v(", { "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"modules"')]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(" }]\n ],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [["),a("span",{attrs:{class:"hljs-string"}},[s._v('"component"')]),s._v(", [\n {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"libraryName"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"element-ui"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"theme-chalk"')]),s._v("\n }\n ]]]\n}\n")])]),a("p",[s._v("Next, if you need Button and Select, edit main.js:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button, Select } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" App "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("Full example (Component list reference "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/carbon/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(CheckboxGroup)\nVue.use(Switch)\nVue.use(Select)\nVue.use(Option)\nVue.use(OptionGroup)\nVue.use(Button)\nVue.use(ButtonGroup)\nVue.use(Table)\nVue.use(TableColumn)\nVue.use(DatePicker)\nVue.use(TimeSelect)\nVue.use(TimePicker)\nVue.use(Popover)\nVue.use(Tooltip)\nVue.use(Breadcrumb)\nVue.use(BreadcrumbItem)\nVue.use(Form)\nVue.use(FormItem)\nVue.use(Tabs)\nVue.use(TabPane)\nVue.use(Tag)\nVue.use(Tree)\nVue.use(Alert)\nVue.use(Slider)\nVue.use(Icon)\nVue.use(Row)\nVue.use(Col)\nVue.use(Upload)\nVue.use(Progress)\nVue.use(Badge)\nVue.use(Card)\nVue.use(Rate)\nVue.use(Steps)\nVue.use(Step)\nVue.use(Carousel)\nVue.use(CarouselItem)\nVue.use(Collapse)\nVue.use(CollapseItem)\nVue.use(Cascader)\nVue.use(ColorPicker)\nVue.use(Container)\nVue.use(Header)\nVue.use(Aside)\nVue.use(Main)\nVue.use(Footer)\n\nVue.use(Loading.directive)\n\nVue.prototype.$loading = Loading.service\nVue.prototype.$msgbox = MessageBox\nVue.prototype.$alert = MessageBox.alert\nVue.prototype.$confirm = MessageBox.confirm\nVue.prototype.$prompt = MessageBox.prompt\nVue.prototype.$notify = Notification\nVue.prototype.$message = Message\n")])]),a("h3",{attrs:{id:"global-config"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-config","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global config")]),a("p",[s._v("When importing Element, you can define a global config object. For now this object has only one property: "),a("code",{pre:!0},[s._v("size")]),s._v(", which sets the default size for all components:")]),a("p",[s._v("Fully import Element：")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-JS"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Element "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\nVue.use(Element, { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'small'")]),s._v(" })\n")])]),a("p",[s._v("Partial import Element：")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-JS"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Button } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui'")]),s._v("\n\nVue.prototype.$ELEMENT = { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'small'")]),s._v(" }\nVue.use(Button)\n")])]),a("p",[s._v("With the above config, the default size of all components that have size attribute will be 'small'.")]),a("h3",{attrs:{id:"start-coding"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[s._v("¶")]),s._v(" Start coding")]),a("p",[s._v("Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-bash"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("# visit localhost:8086")]),s._v("\nnpm run dev\n")])]),a("p",[s._v("Build:")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-bash"}},[s._v("npm run build\n")])]),a("p",[s._v("Please refer to each component's documentation to learn how to use them.")])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1047)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(1048),l=a.n(e),n=a(1049),r=a(0),v=r(l.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";s.exports={data:function(){return{radio:"1",radio1:"selected and disabled",radio2:3,radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York",radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Single selection among multiple options.")]),s._m(1),a("p",[s._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio",{attrs:{label:"1"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("Option B")])]],2),a("p",[s._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),a("code",[s._v("v-model")]),s._v(". It equals to the value of "),a("code",[s._v("label")]),s._v(" of the chosen radio. The type of "),a("code",[s._v("label")]),s._v(" is "),a("code",[s._v("String")]),s._v(", "),a("code",[s._v("Number")]),s._v(" or "),a("code",[s._v("Boolean")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio1: 'selected and disabled'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("Option A")]),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("Option B")])]],2),a("p",[s._v("You just need to add the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selected and disabled"')]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'selected and disabled'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Suitable for choosing from some mutually exclusive options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Option A\n Option B\n Option C\n\n\n\n',script:"\n export default {\n data () {\n return {\n radio2: 3\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-radio-group",{model:{value:s.radio2,callback:function(t){s.radio2=t},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[s._v("Option A")]),a("el-radio",{attrs:{label:6}},[s._v("Option B")]),a("el-radio",{attrs:{label:9}},[s._v("Option C")])],1)],1),a("p",[s._v("Combine "),a("code",[s._v("el-radio-group")]),s._v(" with "),a("code",[s._v("el-radio")]),s._v(" to display a radio group. Bind a variable with "),a("code",[s._v("v-model")]),s._v(" of "),a("code",[s._v("el-radio-group")]),s._v(" element and set label value in "),a("code",[s._v("el-radio")]),s._v(". It also provides "),a("code",[s._v("change")]),s._v(" event with the current value as its parameter.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"6"')]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"9"')]),s._v(">")]),s._v("Option C"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio2")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Radio with button styles.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio3: 'New York',\n radio4: 'New York',\n radio5: 'New York',\n radio6: 'New York'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-radio-group",{model:{value:s.radio3,callback:function(t){s.radio3=t},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:s.radio4,callback:function(t){s.radio4=t},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.radio5,callback:function(t){s.radio5=t},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington",disabled:""}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:s.radio6,callback:function(t){s.radio6=t},expression:"radio6"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2),a("p",[s._v("You just need to change "),a("code",[s._v("el-radio")]),s._v(" element into "),a("code",[s._v("el-radio-button")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio5"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Chicago"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio5")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio6")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New York'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio7: '1',\n radio8: '1',\n radio9: '1',\n radio10: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-radio",{attrs:{label:"1",border:""},model:{value:s.radio7,callback:function(t){s.radio7=t},expression:"radio7"}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:""},model:{value:s.radio7,callback:function(t){s.radio7=t},expression:"radio7"}},[s._v("Option B")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:s.radio8,callback:function(t){s.radio8=t},expression:"radio8"}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:s.radio8,callback:function(t){s.radio8=t},expression:"radio8"}},[s._v("Option B")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.radio9,callback:function(t){s.radio9=t},expression:"radio9"}},[a("el-radio",{attrs:{label:"1",border:""}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:"",disabled:""}},[s._v("Option B")])],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:s.radio10,callback:function(t){s.radio10=t},expression:"radio10"}},[a("el-radio",{attrs:{label:"1",border:""}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:""}},[s._v("Option B")])],1)],1)]],2),a("p",[s._v("The "),a("code",[s._v("border")]),s._v(" attribute adds a border to Radios.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio7"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio7"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio9"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"radio10"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option A"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v(">")]),s._v("Option B"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio7")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio8")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio9")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("radio10")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute is used to disable the radio.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio button group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-borders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[s._v("¶")]),s._v(" With borders")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of Radio")]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether to add a border around Radio")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the Radio, only works when "),a("code",{pre:!0},[s._v("border")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of radio buttons or bordered radios")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the nesting radios are disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1051)},function(s,t,a){"use strict";function e(s){a(1052)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1054),n=a.n(l),r=a(1055),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1053);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("da19778e",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for rating")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n \n
    \n
    \n Color for different levels\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value1: null,\n value2: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-rate",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]),a("p",[s._v("Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the "),a("code",[s._v("colors")]),s._v(" attribute, and their two thresholds can be defined by "),a("code",[s._v("low-threshold")]),s._v(" and "),a("code",[s._v("high-threshold")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Color for different levels"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":colors")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Using text to indicate rating score")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value3: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("p",[s._v("Add attribute "),a("code",[s._v("show-text")]),s._v(" to display text at the right of Rate. You can assign texts for different scores using "),a("code",[s._v("texts")]),s._v(". "),a("code",[s._v("texts")]),s._v(" is an array whose length should be equal to the max score "),a("code",[s._v("max")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":texts")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['oops', 'disappointed', 'normal', 'good', 'great']\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can use different icons to distinguish different rate components.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value4: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("You can customize icons for three different levels using "),a("code",[s._v("icon-classes")]),s._v(". In this example, we also use "),a("code",[s._v("void-icon-class")]),s._v(" to set the icon if it is unselected.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":icon-classes")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("void-icon-class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"icon-rate-face-off"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":colors")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Read-only Rate is for displaying rating score. Half star is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n value5: 3.7\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("p",[s._v("Use attribute "),a("code",[s._v("disabled")]),s._v(" to make the component read-only. Add "),a("code",[s._v("show-score")]),s._v(" to display the rating score at the right side. Additionally, you can use attribute "),a("code",[s._v("score-template")]),s._v(" to provide a score template. It must contain "),a("code",[s._v("{value}")]),s._v(", and "),a("code",[s._v("{value}")]),s._v(" will be replaced with the rating score.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-rate")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-score")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("text-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ff9900"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("score-template")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"{value} points"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3.7")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" With text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" More icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"read-only"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[s._v("¶")]),s._v(" Read-only")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("max rating score")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Rate is read-only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("whether picking half start is allowed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("threshold value between low and medium level. The value itself will be included in low level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("threshold value between medium and high level. The value itself will be included in high level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("color of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("color of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("class name of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("class name of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to display texts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-score")]),a("td",[s._v("whether to display current score. show-score and show-text cannot be true at the same time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("color of texts")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("text array")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("score-template")]),a("td",[s._v("score template")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("Triggers when rate value is changed")]),a("td",[s._v("value after changing")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1057)},function(s,t,a){"use strict";function e(s){a(1058)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1060),n=a.n(l),r=a(1061),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1059);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("0f47b24d",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".demo-select .el-select{width:240px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{list:null,options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City Name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:[],value10:[],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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value,callback:function(t){s.value=t},expression:"value"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v(" is the value of "),a("code",[s._v("el-option")]),s._v(" that is currently selected.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2',\n disabled: true\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value2: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}},s._l(s.options2,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("disabled")]),s._v(" in "),a("code",[s._v("el-option")]),s._v(" to "),a("code",[s._v("true")]),s._v(" to disable this option.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Disable the whole component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value3: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("disabled")]),s._v(" of "),a("code",[s._v("el-select")]),s._v(" to make it disabled.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can clear Select using a clear icon.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value4: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("clearable")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" and a clear icon will appear. Note that "),a("code",[s._v("clearable")]),s._v(" is only for single select.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("clearable")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Multiple select uses tags to display selected options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value5: []\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("multiple")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" to enable multiple mode. In this case, the value of "),a("code",[s._v("v-model")]),s._v(" will be an array of selected options.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": []\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("You can customize HTML templates for options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n cities: [{\n value: 'Beijing',\n label: 'Beijing'\n }, {\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Nanjing',\n label: 'Nanjing'\n }, {\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }],\n value6: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}},s._l(s.cities,function(t){return a("el-option",{key:t.value,attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[s._v(s._s(t.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(t.value))])])}))]],2),a("p",[s._v("Insert customized HTML templates into the slot of "),a("code",[s._v("el-option")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in cities"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"float: left"')]),s._v(">")]),s._v("{{ item.label }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),s._v("{{ item.value }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("cities")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Nanjing'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Nanjing'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Display options in groups.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options3: [{\n label: 'Popular cities',\n options: [{\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Beijing',\n label: 'Beijing'\n }]\n }, {\n label: 'City name',\n options: [{\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }, {\n value: 'Dalian',\n label: 'Dalian'\n }]\n }],\n value7: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}},s._l(s.options3,function(t){return a("el-option-group",{key:t.label,attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("Use "),a("code",[s._v("el-option-group")]),s._v(" to group the options, and its "),a("code",[s._v("label")]),s._v(" attribute stands for the name of the group.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option-group")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"group in options3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"group.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"group.label"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in group.options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Popular cities'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shanghai'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Beijing'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'City name'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Chengdu'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Shenzhen'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Guangzhou'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dalian'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Dalian'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("You can filter options for your desired ones.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value8: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-select")]),s._v(" enables filtering. By default, Select will find all the options whose "),a("code",[s._v("label")]),s._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),a("code",[s._v("filter-method")]),s._v(". "),a("code",[s._v("filter-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("Enter keywords and search data from server.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:'\n export default {\n data() {\n return {\n options4: [],\n value9: [],\n list: [],\n loading: false,\n states: ["Alabama", "Alaska", "Arizona",\n "Arkansas", "California", "Colorado",\n "Connecticut", "Delaware", "Florida",\n "Georgia", "Hawaii", "Idaho", "Illinois",\n "Indiana", "Iowa", "Kansas", "Kentucky",\n "Louisiana", "Maine", "Maryland",\n "Massachusetts", "Michigan", "Minnesota",\n "Mississippi", "Missouri", "Montana",\n "Nebraska", "Nevada", "New Hampshire",\n "New Jersey", "New Mexico", "New York",\n "North Carolina", "North Dakota", "Ohio",\n "Oklahoma", "Oregon", "Pennsylvania",\n "Rhode Island", "South Carolina",\n "South Dakota", "Tennessee", "Texas",\n "Utah", "Vermont", "Virginia",\n "Washington", "West Virginia", "Wisconsin",\n "Wyoming"]\n }\n },\n mounted() {\n this.list = this.states.map(item => {\n return { value: item, label: item };\n });\n },\n methods: {\n remoteMethod(query) {\n if (query !== \'\') {\n this.loading = true;\n setTimeout(() => {\n this.loading = false;\n this.options4 = this.list.filter(item => {\n return item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > -1;\n });\n }, 200);\n } else {\n this.options4 = [];\n }\n }\n }\n }\n',style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"",placeholder:"Please enter a keyword","remote-method":s.remoteMethod,loading:s.loading},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}},s._l(s.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("filterable")]),s._v(" and "),a("code",[s._v("remote")]),s._v(" with "),a("code",[s._v("true")]),s._v(" to enable remote search, and you should pass the "),a("code",[s._v("remote-method")]),s._v(". "),a("code",[s._v("remote-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),a("code",[s._v("el-option")]),s._v(" is rendered with the "),a("code",[s._v("v-for")]),s._v(" directive, you should add the "),a("code",[s._v("key")]),s._v(" attribute for "),a("code",[s._v("el-option")]),s._v(". Its value needs to be unique, such as "),a("code",[s._v("item.value")]),s._v(" in the following example.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-select")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("remote")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Please enter a keyword"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":remote-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"remoteMethod"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":loading")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options4")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("list")]),s._v(": [],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("loading")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("states")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"Alabama"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Alaska"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Arizona"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Arkansas"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"California"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Colorado"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Connecticut"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Delaware"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Florida"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Georgia"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Hawaii"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Idaho"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Illinois"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Indiana"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Iowa"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Kansas"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Kentucky"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Louisiana"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Maine"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Maryland"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Massachusetts"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Michigan"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Minnesota"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Mississippi"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Missouri"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Montana"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Nebraska"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Nevada"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"New Hampshire"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"New Jersey"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"New Mexico"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"New York"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"North Carolina"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"North Dakota"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Ohio"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Oklahoma"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Oregon"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pennsylvania"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Rhode Island"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"South Carolina"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"South Dakota"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Tennessee"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Texas"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Utah"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Vermont"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Virginia"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Washington"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"West Virginia"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Wisconsin"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"Wyoming"')]),s._v("]\n }\n },\n mounted() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".list = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".states.map("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": item, "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": item };\n });\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n remoteMethod(query) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (query !== "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".loading = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options4 = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".list.filter("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n });\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("200")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".options4 = [];\n }\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Create and select new items that are not included in select options")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options5: [{\n value: 'HTML',\n label: 'HTML'\n }, {\n value: 'CSS',\n label: 'CSS'\n }, {\n value: 'JavaScript',\n label: 'JavaScript'\n }],\n value10: []\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}},s._l(s.options5,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("By using the "),a("code",[s._v("allow-create")]),s._v(" attribute, users can create new items by typing in the input box. Note that for "),a("code",[s._v("allow-create")]),s._v(" to work, "),a("code",[s._v("filterable")]),s._v(" must be "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!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("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Choose tags for your article"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-option")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in options5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options5")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'HTML'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'HTML'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CSS'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CSS'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'JavaScript'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'JavaScript'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": []\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"clearable-single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Clearable single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote Search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"create-new-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[s._v("¶")]),s._v(" Create new items")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("If the binding value of Select is an object, make sure to assign "),a("code",{pre:!0},[s._v("value-key")]),s._v(" as its unique identity key name.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether multiple-select is activated")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Select is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value-key")]),a("td",[s._v("unique identity key name for value, required when value is an object")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether single select can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("multiple-limit")]),a("td",[s._v("maximum number of options user can select when "),a("code",{pre:!0},[s._v("multiple")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v(". No limit when set to 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("the name attribute of select input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Select is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-create")]),a("td",[s._v("whether creating new items is allowed. To use this, "),a("code",{pre:!0},[s._v("filterable")]),s._v(" must be true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("remote")]),a("td",[s._v("whether options are loaded from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("remote-method")]),a("td",[s._v("custom remote search method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("whether Select is loading data from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading-text")]),a("td",[s._v("displayed text while loading data from server")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Loading")])]),a("tr",[a("td",[s._v("no-match-text")]),a("td",[s._v("displayed text when no data matches the filtering query")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No matching data")])]),a("tr",[a("td",[s._v("no-data-text")]),a("td",[s._v("displayed text when there is no options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No data")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Select's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-first-option")]),a("td",[s._v("select first matching option on enter key. Use with "),a("code",{pre:!0},[s._v("filterable")]),s._v(" or "),a("code",{pre:!0},[s._v("remote")])]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the selected value changes")]),a("td",[s._v("current selected value")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])]),a("tr",[a("td",[s._v("remove-tag")]),a("td",[s._v("triggers when a tag is removed in multiple mode")]),a("td",[s._v("removed tag value")])]),a("tr",[a("td",[s._v("clear")]),a("td",[s._v("triggers when the clear icon is clicked in a clearable Select")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("name of the group")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable all options in this group")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of option")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label of option, same as "),a("code",{pre:!0},[s._v("value")]),s._v(" if omitted")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether option is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("-")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1063)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(1064),l=a.n(e),n=a(1065),r=a(0),v=r(l.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Drag the slider within a fixed range.")]),s._m(1),a("p",[s._v("The current value is displayed when the slider is being dragged.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value1: 0,\n value2: 50,\n value3: 36,\n value4: 48,\n value5: 42\n }\n },\n methods: {\n formatTooltip(val) {\n return val / 100;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default value")]),a("el-slider",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Customized initial value")]),a("el-slider",{model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hide Tooltip")]),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Format Tooltip")]),a("el-slider",{attrs:{"format-tooltip":s.formatTooltip},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Disabled")]),a("el-slider",{attrs:{disabled:""},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]],2),a("p",[s._v("Customize the initial value of the slider by setting the binding value.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Default value"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Customized initial value"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Hide Tooltip"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":show-tooltip")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Format Tooltip"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":format-tooltip")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formatTooltip"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Disabled"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("50")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("36")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("48")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("42")]),s._v("\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n formatTooltip(val) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" val / "),a("span",{attrs:{class:"hljs-number"}},[s._v("100")]),s._v(";\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("The options can be discrete.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value6: 0,\n value7: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints not displayed")]),a("el-slider",{attrs:{step:10},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints displayed")]),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("Set step size with the "),a("code",[s._v("step")]),s._v(" attribute. You can display breakpoints by setting the "),a("code",[s._v("show-stops")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints not displayed"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints displayed"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":step")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-stops")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Set value via a input box.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value8: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}})],1)]],2),a("p",[s._v("Set the "),a("code",[s._v("show-input")]),s._v(" attribute to display an input box on the right.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value8"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-input")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value8")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Selecting a range of values is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value9: [4, 8]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("range")]),s._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value9"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-stops")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":max")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value9")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v("]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value10: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("vertical")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" enables vertical mode. In vertical mode, the "),a("code",[s._v("height")]),s._v(" attribute is required.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-slider")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value10"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("vertical")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value10")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"slider"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"discrete-values"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[s._v("¶")]),s._v(" Discrete values")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slider-with-input-box"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider with input box")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"range-selection"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[s._v("¶")]),s._v(" Range selection")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("100")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Slider is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("step size")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("show-input")]),a("td",[s._v("whether to display an input box, works when "),a("code",{pre:!0},[s._v("range")]),s._v(" is false")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-input-controls")]),a("td",[s._v("whether to display control buttons when "),a("code",{pre:!0},[s._v("show-input")]),s._v(" is true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-stops")]),a("td",[s._v("whether to display breakpoints")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-tooltip")]),a("td",[s._v("whether to display tooltip value")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("format-tooltip")]),a("td",[s._v("format to display tooltip value")]),a("td",[s._v("Function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("range")]),a("td",[s._v("whether to select a range")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("vertical")]),a("td",[s._v("vertical mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Slider height, required in vertical mode")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label for screen reader")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing, in milliseconds, works when "),a("code",{pre:!0},[s._v("show-input")]),s._v(" is true")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),a("td",[s._v("value after changing")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1067)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(1068),l=a.n(e),n=a(1069),r=a(0),v=r(l.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.")]),s._m(1),a("p",[s._v("Simple step bar.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n\nNext step\n\n\n',script:"\n export default {\n data() {\n return {\n active: 0\n };\n },\n\n methods: {\n next() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("Next step")])],1),a("p",[s._v("Set "),a("code",[s._v("active")]),s._v(" attribute with "),a("code",[s._v("Number")]),s._v(" type, which indicates the index of steps and starts from 0. You can set "),a("code",[s._v("space")]),s._v(" attribute when the width of the step needs to be fixed which accepts "),a("code",[s._v("Boolean")]),s._v(" type. The unit of the "),a("code",[s._v("space")]),s._v(" attribute is "),a("code",[s._v("px")]),s._v(". If not set, it is responsive. Setting the "),a("code",[s._v("finish-status")]),s._v(" attribute can change the state of the steps that have been completed.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"active"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"next"')]),s._v(">")]),s._v("Next step"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("active")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n };\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n next() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active++ > "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(") "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".active = "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Shows the status of the step for each step.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"Done"}}),a("el-step",{attrs:{title:"Processing"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("Use "),a("code",[s._v("title")]),s._v(" attribute to set the name of the step, or override the attribute by using a named "),a("code",[s._v("slot")]),s._v(". We have listed all the slot names for you at the end of this page.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Done"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Processing"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Title and desription can be centered.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:2,"align-center":""}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),a("el-step",{attrs:{title:"Step 3",description:"Some description"}}),a("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("align-center")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 4"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("There is description for each step.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:1}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),a("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("description")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Some description"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("A variety of custom icons can be used in the step bar.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{active:1}},[a("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),a("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),a("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1),a("p",[s._v("The icon is set by the "),a("code",[s._v("icon")]),s._v(" property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-picture"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Vertical step bars.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n \n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticStyle:{height:"300px"}},[a("el-steps",{attrs:{direction:"vertical",active:1}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1)]),a("p",[s._v("You only need to set the "),a("code",[s._v("direction")]),s._v(" attribute to"),a("code",[s._v("vertical")]),s._v(" in the "),a("code",[s._v("el-steps")]),s._v(" element.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"height: 300px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("direction")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"vertical"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n \n \n \n\n\n\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-steps",{attrs:{space:200,active:1,simple:""}},[a("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),a("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),a("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),a("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":space")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("simple")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-picture"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-steps")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":active")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("finish-status")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("simple")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 1"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 2"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-step")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Step 3"')]),s._v(" >")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-that-contains-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar that contains status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"center"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#center","aria-hidden":"true"}},[s._v("¶")]),s._v(" Center")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"simple-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Simple step bars, where "),a("code",{pre:!0},[s._v("align-center")]),s._v(", "),a("code",{pre:!0},[s._v("description")]),s._v(", "),a("code",{pre:!0},[s._v("direction")]),s._v(" and "),a("code",{pre:!0},[s._v("space")]),s._v(" will be ignored.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("the spacing of each step, will be responsive if omitted. Supports percentage.")]),a("td",[s._v("number / string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("display direction")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("current activation step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("status of current step")]),a("td",[s._v("string")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("status of end step")]),a("td",[s._v("string")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("center title and description")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("simple")]),a("td",[s._v("whether to apply simple theme")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("step icon")]),a("td",[s._v("step icon's class name. Icons can be passed via named slot as well")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("current status. It will be automatically set by Steps if not configured.")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("custom icon")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1071)},function(s,t,a){"use strict";function e(s){a(1072)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1074),n=a.n(l),r=a(1075),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1073);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("37cb8105",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Switch is used for switching between two opposing states.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-switch",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}}),a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("p",[s._v("Bind "),a("code",[s._v("v-model")]),s._v(" to a "),a("code",[s._v("Boolean")]),s._v(" typed variable. The "),a("code",[s._v("on-color")]),s._v(" and "),a("code",[s._v("off-color")]),s._v(" attribute decides the background color in two states.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("on-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("off-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value3: true,\n value4: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-switch",{attrs:{"on-text":"Pay by month","off-text":"Pay by year"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}}),a("el-switch",{staticStyle:{display:"block"},attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-text":"Pay by month","off-text":"Pay by year"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("You can add "),a("code",[s._v("on-text")]),s._v(" and "),a("code",[s._v("off-text")]),s._v(" attribute to show texts.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("on-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by month"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("off-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by year"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"display: block"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("on-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("off-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("on-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by month"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("off-text")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Pay by year"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n',script:"\n export default {\n data() {\n return {\n value5: '100'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tooltip",{attrs:{content:"Switch value: "+s.value5,placement:"top"}},[a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-value":"100","off-value":"0"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)],1),a("p",[s._v("You can set "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(" attributes. They both receive a "),a("code",[s._v("Boolean")]),s._v(", "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(" typed value.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!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("on-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#13ce66"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("off-color")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"#ff4949"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("on-value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("off-value")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"0"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'100'")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value6: true,\n value7: false\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-switch",{attrs:{disabled:""},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}}),a("el-switch",{attrs:{disabled:""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1),a("p",[s._v("Adding the "),a("code",[s._v("disabled")]),s._v(" attribute disables Switch.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-switch")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value7"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value6")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value7")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"text-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Text description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"extended-value-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Extended value types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Switch is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of Switch")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("40")])]),a("tr",[a("td",[s._v("on-close-icon")]),a("td",[s._v("class name of the icon displayed when in "),a("code",{pre:!0},[s._v("on")]),s._v(" state, overrides "),a("code",{pre:!0},[s._v("on-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-close-icon")]),a("td",[s._v("class name of the icon displayed when in "),a("code",{pre:!0},[s._v("off")]),s._v(" state, overrides "),a("code",{pre:!0},[s._v("off-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-text")]),a("td",[s._v("text displayed when in "),a("code",{pre:!0},[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-text")]),a("td",[s._v("text displayed when in "),a("code",{pre:!0},[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-value")]),a("td",[s._v("switch value when in "),a("code",{pre:!0},[s._v("on")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("off-value")]),a("td",[s._v("switch value when in "),a("code",{pre:!0},[s._v("off")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("on-color")]),a("td",[s._v("background color when in "),a("code",{pre:!0},[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])]),a("tr",[a("td",[s._v("off-color")]),a("td",[s._v("background color when in "),a("code",{pre:!0},[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("input name of Switch")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when value changes")]),a("td",[s._v("value after changing")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Switch component")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1077)},function(s,t,a){"use strict";function e(s){a(1078)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1080),n=a.n(l),r=a(1081),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1079);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("22f0eb58",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".el-table .info-row{background:#c9e5f5}.el-table .positive-row{background:#e2f0e4}.demo-table .name-wrapper{display:inline-block}.demo-table .demo-table-expand label{width:90px;color:#99a9bf}.demo-table .demo-table-expand .el-form-item{margin-right:0;margin-bottom:0;width:50%}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}],tableData2:[{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",$info:!0},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",$positive:!0}],tableData3:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData4:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData6:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}],currentRow:null,multipleSelection:[]}},methods:{getSummaries:function(s){var t=s.columns,a=s.data,e=[];return t.forEach(function(s,t){if(0===t)return void(e[t]="Total Cost");var l=a.map(function(t){return Number(t[s.property])});l.every(function(s){return isNaN(s)})?e[t]="N/A":e[t]="$ "+l.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0)}),e},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var t=this;s?s.forEach(function(s){t.$refs.multipleTable.toggleRowSelection(s)}):this.$refs.multipleTable.clearSelection()},handleClick:function(){console.log("click")},handleEdit:function(s,t){console.log(s,t)},handleDelete:function(s,t){console.log(s,t)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,t){return s.address},filterTag:function(s,t){return t.tag===s},tableRowClassName:function(s,t){return 1===t?"info-row":3===t?"positive-row":""},deleteRow:function(s,t){t.splice(s,1)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),s._m(1),a("p",[s._v("Basic table is just for data display.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:' \n\n \n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n ",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("After setting attribute "),a("code",[s._v("data")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" with an object array, you can use "),a("code",[s._v("prop")]),s._v(" (corresponding to a key of the object in "),a("code",[s._v("data")]),s._v(" array) in "),a("code",[s._v("el-table-column")]),s._v(" to insert data to table columns, and set the attribute "),a("code",[s._v("label")]),s._v(" to define the column name. You can also use the attribute "),a("code",[s._v("width")]),s._v(" to define the width of columns.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[s._v(" "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n ")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Striped table makes it easier to distinguish different rows.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("stripe")]),s._v(" accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._v(", table will be striped.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("stripe")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By default, Table has no vertical border. If you need it, you can set attribute "),a("code",[s._v("border")]),s._v(" to "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n methods: {\n tableRowClassName(row, index) {\n if (index === 1) {\n return 'info-row';\n } else if (index === 3) {\n return 'positive-row';\n }\n return '';\n }\n },\n data() {\n return {\n tableData2: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:"\n .el-table .info-row {\n background: #c9e5f5;\n }\n\n .el-table .positive-row {\n background: #e2f0e4;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Use "),a("code",[s._v("row-class-name")]),s._v(" in "),a("code",[s._v("el-table")]),s._v(" to add custom classes to a certain row. Then you can style it with custom classes.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":row-class-name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-table")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".info-row")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#c9e5f5")]),s._v(";\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(".positive-row")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#e2f0e4")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n tableRowClassName(row, index) {\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("return")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info-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(" (index === "),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("'positive-row'")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n }\n },\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("When there are too many rows, you can use a fixed header.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250"}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header without any other codes.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("When there are too many columns, you can fix some of them.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n handleClick() {\n console.log('click');\n }\n },\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("Detail")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("Edit")])]}}])})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("fixed")]),s._v(" is used in "),a("code",[s._v("el-table-column")]),s._v(", it accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._v(", the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"State"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"City"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Operations"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Detail"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Edit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick() {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(");\n }\n },\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2),a("p",[s._v("Fix columns and header at the same time by combining the above two examples.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"State"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"City"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n deleteRow(index, rows) {\n rows.splice(index, 1);\n }\n },\n data() {\n return {\n tableData4: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n Remove\n ")])]}}])})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("max-height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max-height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"250"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"State"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"City"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fixed")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Operations"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click.native.prevent")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("\n Remove\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n deleteRow(index, rows) {\n rows.splice(index, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n }\n },\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData4")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{label:"Delivery Info"}},[a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{label:"Address Info"}},[a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2),a("p",[s._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Delivery Info"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address Info"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"state"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"State"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"city"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"City"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Zip"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Single row selection is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n currentRow: null\n }\n },\n\n methods: {\n setCurrent(row) {\n this.$refs.singleTable.setCurrentRow(row);\n },\n handleCurrentChange(val) {\n this.currentRow = val;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),a("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.setCurrent(s.tableData[1])}}},[s._v("Select second row")]),a("el-button",{on:{click:function(t){s.setCurrent()}}},[s._v("Clear selection")])],1)]],2),a("p",[s._v("Table supports single row selection. You can activate it by adding the "),a("code",[s._v("highlight-current-row")]),s._v(" attribute. An event called "),a("code",[s._v("current-change")]),s._v(" will be triggered when row selection changes, and its parameters are the rows after and before this change: "),a("code",[s._v("currentRow")]),s._v(" and "),a("code",[s._v("oldCurrentRow")]),s._v(". If you need to display row index, you can add a new "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" attribute assigned to "),a("code",[s._v("index")]),s._v(", and you will see the index starting from 1.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"singleTable"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("highlight-current-row")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@current-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"50"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"setCurrent(tableData[1])"')]),s._v(">")]),s._v("Select second row"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"setCurrent()"')]),s._v(">")]),s._v("Clear selection"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("currentRow")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("null")]),s._v("\n }\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n setCurrent(row) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.singleTable.setCurrentRow(row);\n },\n handleCurrentChange(val) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".currentRow = val;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("You can also select multiple rows.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n multipleSelection: []\n }\n },\n\n methods: {\n toggleSelection(rows) {\n if (rows) {\n rows.forEach(row => {\n this.$refs.multipleTable.toggleRowSelection(row);\n });\n } else {\n this.$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n this.multipleSelection = val;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3},on:{"selection-change":s.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),a("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:s._u([{key:"default",fn:function(t){return[s._v(s._s(t.row.date))]}}])}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.toggleSelection([s.tableData3[1],s.tableData3[2]])}}},[s._v("Toggle selection status of second and third rows")]),a("el-button",{on:{click:function(t){s.toggleSelection()}}},[s._v("Clear selection")])],1)]],2),a("p",[s._v("Activating multiple selection is easy: simply add an "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" set to "),a("code",[s._v("selection")]),s._v(". Apart from multiple selection, this example also uses "),a("code",[s._v("show-overflow-tooltip")]),s._v(": by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute "),a("code",[s._v("show-overflow-tooltip")]),s._v(", which accepts a "),a("code",[s._v("Boolean")]),s._v(" value. When set "),a("code",[s._v("true")]),s._v(", the extra content will show in tooltip when hover on the cell.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"multipleTable"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@selection-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selection"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"55"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("{{ scope.row.date }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("property")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"toggleSelection([tableData3[1], tableData3[2]])"')]),s._v(">")]),s._v("Toggle selection status of second and third rows"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"toggleSelection()"')]),s._v(">")]),s._v("Clear selection"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("multipleSelection")]),s._v(": []\n }\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n toggleSelection(rows) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (rows) {\n rows.forEach("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("row")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.multipleTable.toggleRowSelection(row);\n });\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".multipleSelection = val;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Sort the data to find or compare data quickly.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,"default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}})],1)]],2),a("p",[s._v("Set attribute "),a("code",[s._v("sortable")]),s._v(" in a certain column to sort the data based on this column. It accepts "),a("code",[s._v("Boolean")]),s._v(" with a default value "),a("code",[s._v("false")]),s._v(". Set table attribute "),a("code",[s._v("default-sort")]),s._v(" to determine default sort column and order. To apply your own sorting rules, use "),a("code",[s._v("sort-method")]),s._v(". If you need remote sorting from backend, set "),a("code",[s._v("sortable")]),s._v(" to "),a("code",[s._v("custom")]),s._v(", and listen to the "),a("code",[s._v("sort-change")]),s._v(" event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named "),a("code",[s._v("formatter")]),s._v(" to format the value of certain columns. It accepts a function which has two parameters: "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("column")]),s._v(". You can handle it according to your own needs.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-sort")]),s._v(" = "),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":formatter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.address;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("Filter the table to find desired data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n },\n filterTag(value, row) {\n return row.tag === value;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":s.filterTag,"filter-placement":"bottom-end"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-tag",{attrs:{type:"Home"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}}])})],1)]],2),a("p",[s._v("Set attribute "),a("code",[s._v("filters")]),s._v(" and "),a("code",[s._v("filter-method")]),s._v(" in "),a("code",[s._v("el-table-column")]),s._v(" makes this column filterable. "),a("code",[s._v("filters")]),s._v(" is an array, and "),a("code",[s._v("filter-method")]),s._v(" is a function deciding which rows are displayed. It has two parameters: "),a("code",[s._v("value")]),s._v(" and "),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('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Address"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":formatter")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Tag"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"100"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":filters")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filterTag"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filter-placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"scope.row.tag === 'Home' ? 'primary' : 'success'\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("close-transition")]),s._v(">")]),s._v("{{scope.row.tag}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tag")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Office'")]),s._v("\n }]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.address;\n },\n filterTag(value, row) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" row.tag === value;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("Customize table column so it can be integrated with other components.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-icon",{attrs:{name:"time"}}),a("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(t.row.date))])]}}])}),a("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[s._v("Name: "+s._s(t.row.name))]),a("p",[s._v("Addr: "+s._s(t.row.address))]),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",[s._v(s._s(t.row.name))])],1)])]}}])}),a("el-table-column",{attrs:{label:"Operations"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"small"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("Edit")]),a("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("Delete")])]}}])})],1)]],2),a("p",[s._v("You have access to the following data: row, column, $index and store (state management of Table) by "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slot")]),s._v(". (Scoped slots is supported from "),a("code",[s._v("1.1")]),s._v(", "),a("code",[s._v("inline-template")]),s._v(" still works, but it's not recommended).")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-icon")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"time"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-left: 10px"')]),s._v(">")]),s._v("{{ scope.row.date }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-popover")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("trigger")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"hover"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Name: {{ scope.row.name }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Addr: {{ scope.row.address }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"reference"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("{{ scope.row.name }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Operations"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("Edit"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("Delete"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleEdit(index, row) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n },\n handleDelete(index, row) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(index, row);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(15),a("p",[s._v("When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([{key:"default",fn:function(t){return[a("p",[s._v("State: "+s._s(t.row.state))]),a("p",[s._v("City: "+s._s(t.row.city))]),a("p",[s._v("Address: "+s._s(t.row.address))]),a("p",[s._v("Zip: "+s._s(t.row.zip))])]}}])}),a("el-table-column",{attrs:{label:"Date",prop:"date"}}),a("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2),a("p",[s._v('Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using '),a("code",[s._v("Scoped slot")]),s._v(" in custom column templates.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"expand"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("State: {{ props.row.state }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("City: {{ props.row.city }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Address: {{ props.row.address }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("Zip: {{ props.row.zip }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Date"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"date"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("state")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("city")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("address")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("zip")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(16),a("p",[s._v("For table of numbers, you can add an extra row at the table footer displaying each column's sum.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData6: [{\n id: '12987122',\n name: 'Tom',\n amount1: '234',\n amount2: '3.2',\n amount3: 10\n }, {\n id: '12987123',\n name: 'Tom',\n amount1: '165',\n amount2: '4.43',\n amount3: 12\n }, {\n id: '12987124',\n name: 'Tom',\n amount1: '324',\n amount2: '1.9',\n amount3: 9\n }, {\n id: '12987125',\n name: 'Tom',\n amount1: '621',\n amount2: '2.2',\n amount3: 17\n }, {\n id: '12987126',\n name: 'Tom',\n amount1: '539',\n amount2: '4.1',\n amount3: 15\n }]\n };\n },\n methods: {\n getSummaries(param) {\n const { columns, data } = param;\n const sums = [];\n columns.forEach((column, index) => {\n if (index === 0) {\n sums[index] = 'Total Cost';\n return;\n }\n const values = data.map(item => Number(item[column.property]));\n if (!values.every(value => isNaN(value))) {\n sums[index] = '$ ' + values.reduce((prev, curr) => {\n const value = Number(curr);\n if (!isNaN(value)) {\n return prev + curr;\n } else {\n return prev;\n }\n }, 0);\n } else {\n sums[index] = 'N/A';\n }\n });\n\n return sums;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",label:"Cost 1 ($)"}}),a("el-table-column",{attrs:{prop:"amount2",label:"Cost 2 ($)"}}),a("el-table-column",{attrs:{prop:"amount3",label:"Cost 3 ($)"}})],1)]],2),a("p",[s._v("You can add the summary row by setting "),a("code",[s._v("show-summary")]),s._v(" to "),a("code",[s._v("true")]),s._v(". By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using "),a("code",[s._v("sum-text")]),s._v("), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to "),a("code",[s._v("summary-method")]),s._v(", which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-summary")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 1"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sortable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Amount 3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tableData6"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("border")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("height")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"200"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":summary-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"getSummaries"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-summary")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"ID"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("width")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Cost 1 ($)"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Cost 2 ($)"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-table-column")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("prop")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"amount3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Cost 3 ($)"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tableData6")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987122'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'234'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'3.2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987123'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'165'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'4.43'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("12")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987124'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'324'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1.9'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987125'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'621'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2.2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("17")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'12987126'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tom'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'539'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'4.1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("amount3")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("\n }]\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n getSummaries(param) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" { columns, data } = param;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" sums = [];\n columns.forEach("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("column, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (index === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n sums[index] = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Total Cost'")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" values = data.map("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("item")]),s._v(" =>")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v("(item[column.property]));\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!values.every("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("value")]),s._v(" =>")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("isNaN")]),s._v("(value))) {\n sums[index] = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'$ '")]),s._v(" + values.reduce("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("prev, curr")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" value = "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Number")]),s._v("(curr);\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("isNaN")]),s._v("(value)) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" prev + curr;\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" prev;\n }\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(");\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n sums[index] = "),a("span",{attrs:{class:"hljs-string"}},[s._v("'N/A'")]),s._v(";\n }\n });\n\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" sums;\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"striped-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Striped Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-border"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with border")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-column"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed column")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed columns and header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fluid-height Table with fixed header (and columns)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping-table-head"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping table head")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sorting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sorting")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filter")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-column-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom column template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"expandable-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Expandable row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"summary-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Summary row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("table data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table's height. By default it has an "),a("code",{pre:!0},[s._v("auto")]),s._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max-height")]),a("td",[s._v("Table's max-height. The height of the table starts from "),a("code",{pre:!0},[s._v("auto")]),s._v(" until it reaches the maxHeight limit. The "),a("code",{pre:!0},[s._v("maxHeight")]),s._v(" is measured in pixels, same as "),a("code",{pre:!0},[s._v("height")])]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("whether table is striped")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether table has vertical border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("whether width of column automatically fits its container")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-header")]),a("td",[s._v("whether table header is visible")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("highlight-current-row")]),a("td",[s._v("whether current row is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-row-key")]),a("td",[s._v("key of current row, a set only prop")]),a("td",[s._v("string,number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-class-name")]),a("td",[s._v("function that returns custom class names for a row, or a string assigning class names for every row")]),a("td",[s._v("Function(row, index)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-style")]),a("td",[s._v("function that returns custom style for a row, or a string assigning custom style for every row")]),a("td",[s._v("Function(row, index)/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-key")]),a("td",[s._v("key of row data, used for optimizing rendering. Required if "),a("code",{pre:!0},[s._v("reserve-selection")]),s._v(" is on. When its type is String, multi-level access is supported, e.g. "),a("code",{pre:!0},[s._v("user.info.id")]),s._v(", but "),a("code",{pre:!0},[s._v("user.info[0].id")]),s._v(" is not supported, in which case "),a("code",{pre:!0},[s._v("Function")]),s._v(" should be used.")]),a("td",[s._v("Function(row)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("Displayed text when data is empty. You can customize this area with "),a("code",{pre:!0},[s._v('slot="empty"')])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("No Data")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v('whether expand all rows by default, only works when the table has a column type="expand"')]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-row-keys")]),a("td",[s._v("set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td")]),a("tr",[a("td",[s._v("default-sort")]),a("td",[s._v("set the default sort column and order. property "),a("code",{pre:!0},[s._v("prop")]),s._v(" is used to set default sort column, property "),a("code",{pre:!0},[s._v("order")]),s._v(" is used to set default sort order")]),a("td",[s._v("Object")]),a("td",[a("code",{pre:!0},[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("if "),a("code",{pre:!0},[s._v("prop")]),s._v(" is set, and "),a("code",{pre:!0},[s._v("order")]),s._v(" is not set, then "),a("code",{pre:!0},[s._v("order")]),s._v(" is default to ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",{pre:!0},[s._v("effect")]),s._v(" property")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td")]),a("tr",[a("td",[s._v("show-summary")]),a("td",[s._v("whether to display a summary row")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sum-text")]),a("td",[s._v("displayed text for the first column of summary row")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("Sum")])]),a("tr",[a("td",[s._v("summary-method")]),a("td",[s._v("custom summary method")]),a("td",[s._v("Function({ columns, data })")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when user clicks the checkbox in a row")]),a("td",[s._v("selection, row")])]),a("tr",[a("td",[s._v("select-all")]),a("td",[s._v("triggers when user clicks the checkbox in table header")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("selection-change")]),a("td",[s._v("triggers when selection changes")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("cell-mouse-enter")]),a("td",[s._v("triggers when hovering into a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-mouse-leave")]),a("td",[s._v("triggers when hovering out of a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-click")]),a("td",[s._v("triggers when clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-dblclick")]),a("td",[s._v("triggers when double clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("row-click")]),a("td",[s._v("triggers when clicking a row")]),a("td",[s._v("row, event, column")])]),a("tr",[a("td",[s._v("row-contextmenu")]),a("td",[s._v("triggers when user right clicks on a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("row-dblclick")]),a("td",[s._v("triggers when double clicking a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("header-click")]),a("td",[s._v("triggers when clicking a column header")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("sort-change")]),a("td",[s._v("triggers when Table's sorting changes")]),a("td",[s._v("{ column, prop, order }")])]),a("tr",[a("td",[s._v("filter-change")]),a("td",[s._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered")]),a("td",[s._v("filters")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current row changes")]),a("td",[s._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[s._v("header-dragend")]),a("td",[s._v("triggers when finish dragging header")]),a("td",[s._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[s._v("expand")]),a("td",[s._v("triggers when user expands or collapses a row")]),a("td",[s._v("row, expanded")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearSelection")]),a("td",[s._v("used in multiple selection Table, clear selection, might be useful when "),a("code",{pre:!0},[s._v("reserve-selection")]),s._v(" is on")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("toggleRowSelection")]),a("td",[s._v("used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected")]),a("td",[s._v("row, selected")])]),a("tr",[a("td",[s._v("setCurrentRow")]),a("td",[s._v("used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.")]),a("td",[s._v("row")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("append")]),a("td",[s._v("Contents to be inserted after the last row. It is still nested inside the "),a("code",{pre:!0},[s._v("")]),s._v(" tag. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one.")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-column-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the column. If set to "),a("code",{pre:!0},[s._v("selection")]),s._v(", the column will display checkbox. If set to "),a("code",{pre:!0},[s._v("index")]),s._v(", the column will display index of the row (staring from 1). If set to "),a("code",{pre:!0},[s._v("expand")]),s._v(", the column will display expand icon.")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("column label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("column-key")]),a("td",[s._v("column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered")]),a("td",[s._v("string")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prop")]),a("td",[s._v("field name. You can also use its alias: "),a("code",{pre:!0},[s._v("property")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("column width")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min-width")]),a("td",[s._v("column minimum width. Columns with "),a("code",{pre:!0},[s._v("width")]),s._v(" has a fixed width, while columns with "),a("code",{pre:!0},[s._v("min-width")]),s._v(" has a width that is distributed in proportion")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fixed")]),a("td",[s._v("whether column is fixed at left/right. Will be fixed at left if "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("string/boolean")]),a("td",[s._v("true/left/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-header")]),a("td",[s._v("render function for table header of this column")]),a("td",[s._v("Function(h, { column, $index })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sortable")]),a("td",[s._v("whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the "),a("code",{pre:!0},[s._v("sort-change")]),s._v(" event of Table")]),a("td",[s._v("boolean, string")]),a("td",[s._v("true, false, custom")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sort-method")]),a("td",[s._v("sorting method, works when "),a("code",{pre:!0},[s._v("sortable")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v(". Should return a boolean.")]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resizable")]),a("td",[s._v("whether column width can be resized, works when "),a("code",{pre:!0},[s._v("border")]),s._v(" of "),a("code",{pre:!0},[s._v("el-table")]),s._v(" is "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("formatter")]),a("td",[s._v("function that formats cell content")]),a("td",[s._v("Function(row, column, cellValue)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-overflow-tooltip")]),a("td",[s._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("string")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("header-align")]),a("td",[s._v("alignment of the table header. If omitted, the value of the above "),a("code",{pre:!0},[s._v("align")]),s._v(" attribute will be applied")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("class-name")]),a("td",[s._v("class name of cells in the column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-class-name")]),a("td",[s._v("class name of the label of this column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("selectable")]),a("td",[s._v("function that determines if a certain row can be selected, works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-selection")]),a("td",[s._v("whether to reserve selection after data refreshing, works when "),a("code",{pre:!0},[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filters")]),a("td",[s._v("an array of data filtering options. For each element in this array, "),a("code",{pre:!0},[s._v("text")]),s._v(" and "),a("code",{pre:!0},[s._v("value")]),s._v(" are required")]),a("td",[s._v("Array[{ text, value }]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-placement")]),a("td",[s._v("placement for the filter dropdown")]),a("td",[s._v("String")]),a("td",[s._v("same as Tooltip's "),a("code",{pre:!0},[s._v("placement")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-multiple")]),a("td",[s._v("whether data filtering supports multiple options")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("data filtering method. If "),a("code",{pre:!0},[s._v("filter-multiple")]),s._v(" is on, this method will be called multiple times for each row, and a row will display if one of the calls returns "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("Function(value, row)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filtered-value")]),a("td",[s._v("filter value for selected data, might be useful when table header is rendered with "),a("code",{pre:!0},[s._v("render-header")])]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1083)},function(s,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=a(1084),l=a.n(e),n=a(1085),r=a(0),v=r(l.a,n.a,!1,null,null,null);t.default=v.exports},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{activeName:"second",activeName2:"first",editableTabsValue:"2",editableTabsValue2:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2,tabPosition:"top"}},methods:{handleClick:function(s,t){console.log(s,t)},handleTabsEdit:function(s,t){var a=this;if("add"===t){var e=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:e,content:"New Tab content"}),this.editableTabsValue=e}"remove"===t&&function(){var t=a.editableTabs,e=a.editableTabsValue;e===s&&t.forEach(function(a,l){if(a.name===s){var n=t[l+1]||t[l-1];n&&(e=n.name)}}),a.editableTabsValue=e,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(e,l){if(e.name===s){var n=t[l+1]||t[l-1];n&&(a=n.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Divide data collections which are related yet belong to different types.")]),s._m(1),a("p",[s._v("Basic and concise tabs.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n activeName: 'first'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[s._v("Task")])],1)]],2),a("p",[s._v("Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the "),a("code",[s._v("value")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"activeName"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@tab-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"first"')]),s._v(">")]),s._v("User"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"second"')]),s._v(">")]),s._v("Config"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"third"')]),s._v(">")]),s._v("Role"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fourth"')]),s._v(">")]),s._v("Task"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'first'")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Tabs styled as cards.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n activeName: 'first'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._v(" can get a card-styled tab.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@tab-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("activeName")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'first'")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Border card tabs.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n User\n Config\n Role\n Task\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("border-card")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n tabPosition: 'top'\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:s.tabPosition,callback:function(t){s.tabPosition=t},expression:"tabPosition"}},[a("el-radio-button",{attrs:{label:"top"}},[s._v("top")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("right")]),a("el-radio-button",{attrs:{label:"bottom"}},[s._v("bottom")]),a("el-radio-button",{attrs:{label:"left"}},[s._v("left")])],1),a("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":s.tabPosition}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),a("p",[s._v("You can choose from four directions: "),a("code",[s._v('tabPosition="left|right|top|bottom"')])]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-group")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tabPosition"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 30px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("top"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("right"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("bottom"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-radio-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("left"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":tab-position")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tabPosition"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"height: 200px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabPosition")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'top'")]),s._v("\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("You can use named slot to customize the tab label content.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Route\n Route\n \n Config\n Role\n Task\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{attrs:{slot:"label"},slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n Route\n ")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"label"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v(" Route"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n Route\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Only card type Tabs support addable & closeable.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n {{item.content}}\n \n\n\n',script:"\n export default {\n data() {\n return {\n editableTabsValue: '2',\n editableTabs: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n handleTabsEdit(targetName, action) {\n if (action === 'add') {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue = newTabName;\n }\n if (action === 'remove') {\n let tabs = this.editableTabs;\n let activeName = this.editableTabsValue;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue = activeName;\n this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:s.handleTabsEdit},model:{value:s.editableTabsValue,callback:function(t){s.editableTabsValue=t},expression:"editableTabsValue"}},s._l(s.editableTabs,function(t,e){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}))],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("editable")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@edit")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in editableTabs"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.title"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n {{item.content}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabsValue")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabs")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabIndex")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleTabsEdit(targetName, action) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'add'")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" newTabName = ++"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".tabIndex + "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": newTabName,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (action === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'remove'")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" tabs = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" activeName = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] || tabs[index - "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue = activeName;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n add tab\n \n
    \n\n \n {{item.content}}\n \n\n\n',script:"\n export default {\n data() {\n return {\n editableTabsValue2: '2',\n editableTabs2: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n addTab(targetName) {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs2.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n let tabs = this.editableTabs2;\n let activeName = this.editableTabsValue2;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue2 = activeName;\n this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){s.addTab(s.editableTabsValue2)}}},[s._v("\n add tab\n ")])],1),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":s.removeTab},model:{value:s.editableTabsValue2,callback:function(t){s.editableTabsValue2=t},expression:"editableTabsValue2"}},s._l(s.editableTabs2,function(t,e){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}))],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n >")]),s._v("\n add tab\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tabs")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"card"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@tab-remove")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"removeTab"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tab-pane")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in editableTabs2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.title"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n {{item.content}}\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabsValue2")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("editableTabs2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabIndex")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v("\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n addTab(targetName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" newTabName = ++"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".tabIndex + "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": newTabName,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" tabs = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" activeName = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("] || tabs[index - "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card Style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"border-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Border card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-position"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-position","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab position")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use "),a("code",{pre:!0},[s._v("tab-position")]),s._v(" attribute to set the tab's position.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom Tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"add-close-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Add & close tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customized trigger button of new tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of Tab")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("whether Tab is addable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether Tab is addable and closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-name(deprecated)")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])]),a("tr",[a("td",[s._v("tab-position")]),a("td",[s._v("position of tabs")]),a("td",[s._v("string")]),a("td",[s._v("top/right/bottom/left")]),a("td",[s._v("top")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("triggers when a tab is clicked")]),a("td",[s._v("clicked tab")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("triggers when tab-remove button is clicked")]),a("td",[s._v("name of the removed tab")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("triggers when tab-add button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("triggers when tab-add button or tab-remove is clicked")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("title of the tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tab is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1087)},function(s,t,a){"use strict";function e(s){a(1088)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1090),n=a.n(l),r=a(1091),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1089);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("083464aa",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".demo-box.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-box.demo-tag .button-new-tag{margin-left:10px;height:32px;line-height:30px;padding-top:0;padding-bottom:0}.demo-box.demo-tag .input-new-tag{width:90px;margin-left:10px;vertical-align:bottom}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}],dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for marking and selection.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Tag One\nTag Two\nTag Three\nTag Four\nTag Five\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tag",[s._v("Tag One")]),a("el-tag",{attrs:{type:"success"}},[s._v("Tag Two")]),a("el-tag",{attrs:{type:"info"}},[s._v("Tag Three")]),a("el-tag",{attrs:{type:"warning"}},[s._v("Tag Four")]),a("el-tag",{attrs:{type:"danger"}},[s._v("Tag Five")])],1),a("p",[s._v("Use the "),a("code",[s._v("type")]),s._v(" attribute to define Tag's type. In addition, the "),a("code",[s._v("color")]),s._v(" attribute can be used to set the background color of the Tag.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("Tag One"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("Tag Two"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"info"')]),s._v(">")]),s._v("Tag Three"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"warning"')]),s._v(">")]),s._v("Tag Four"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"danger"')]),s._v(">")]),s._v("Tag Five"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n {{tag.name}}\n\n\n\n',script:"\n export default {\n data() {\n return {\n tags: [\n { name: 'Tag 1', type: '' },\n { name: 'Tag 2', type: 'success' },\n { name: 'Tag 3', type: 'info' },\n { name: 'Tag 4', type: 'warning' },\n { name: 'Tag 5', type: 'danger' }\n ]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},s._l(s.tags,function(t){return a("el-tag",{key:t.name,attrs:{closable:"",type:t.type}},[s._v("\n "+s._s(t.name)+"\n")])})),a("p",[a("code",[s._v("closable")]),s._v(" attribute can be used to define a removable tag. It accepts a "),a("code",[s._v("Boolean")]),s._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),a("code",[s._v("disable-transitions")]),s._v(" attribute, which accepts a "),a("code",[s._v("Boolean")]),s._v(", to "),a("code",[s._v("true")]),s._v(". "),a("code",[s._v("close")]),s._v(" event triggers when Tag is removed.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag in tags"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag.name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag.type"')]),s._v(">")]),s._v("\n {{tag.name}}\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tags")]),s._v(": [\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 1'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 2'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'success'")]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 3'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'info'")]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 4'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warning'")]),s._v(" },\n { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 5'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'danger'")]),s._v(" }\n ]\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n {{tag}}\n\n\n\n+ New Tag\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n inputVisible: false,\n inputValue: ''\n };\n },\n methods: {\n handleClose(tag) {\n this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n },\n\n showInput() {\n this.inputVisible = true;\n this.$nextTick(_ => {\n this.$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n let inputValue = this.inputValue;\n if (inputValue) {\n this.dynamicTags.push(inputValue);\n }\n this.inputVisible = false;\n this.inputValue = '';\n }\n }\n }\n",style:"\n .el-tag + .el-tag {\n margin-left: 10px;\n }\n .button-new-tag {\n margin-left: 10px;\n height: 32px;\n line-height: 30px;\n padding-top: 0;\n padding-bottom: 0;\n }\n .input-new-tag {\n width: 90px;\n margin-left: 10px;\n vertical-align: bottom;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n "+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(t){if(!("button"in t)&&s._k(t.keyCode,"enter",13,t.key))return null;s.handleInputConfirm(t)}},model:{value:s.inputValue,callback:function(t){s.inputValue=t},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tag in dynamicTags"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("closable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disable-transitions")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@close")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleClose(tag)"')]),s._v(">")]),s._v("\n {{tag}}\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"input-new-tag"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"inputVisible"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"inputValue"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"saveTagInput"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@keyup.enter.native")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleInputConfirm"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@blur")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"button-new-tag"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-tag")]),s._v(" + "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-tag")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".button-new-tag")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("32px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("30px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding-top")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".input-new-tag")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("90px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("vertical-align")]),s._v(": bottom;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dynamicTags")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 1'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 2'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Tag 3'")]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inputVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inputValue")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleClose(tag) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n },\n\n showInput() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputVisible = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$nextTick("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" inputValue = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputValue;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (inputValue) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputVisible = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".inputValue = "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(";\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Default\nMedium\nSmall\nMini\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tag",[s._v("Default")]),a("el-tag",{attrs:{size:"medium"}},[s._v("Medium")]),a("el-tag",{attrs:{size:"small"}},[s._v("Small")]),a("el-tag",{attrs:{size:"mini"}},[s._v("Mini")])],1),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("medium")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(">")]),s._v("Default"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"medium"')]),s._v(">")]),s._v("Medium"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Small"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tag")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"mini"')]),s._v(">")]),s._v("Mini"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"removable-tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Removable Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"edit-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Edit Dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use the "),a("code",{pre:!0},[s._v("close")]),s._v(" event to add and remove tag dynamically.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("theme")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tag can be removed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disable-transitions")]),a("td",[s._v("whether to disable animations")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("whether Tag has a highlighted border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("background color of the Tag")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("tag size")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when Tag is removed")]),a("td",[s._v("—")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1093)},function(s,t,a){"use strict";function e(s){a(1094)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1096),n=a.n(l),r=a(1097),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1095);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("58b10e42",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Time Picker for time input.")]),s._m(1),a("p",[s._v("Provide a list of fixed time for users to choose.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value1: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("p",[s._v("Use "),a("code",[s._v("el-time-select")]),s._v(" label, then assign start time, end time and time step with "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(" and "),a("code",[s._v("step")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Select time"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Can pick an arbitrary time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value2: new Date(2016, 9, 10, 18, 40),\n value3: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}}),a("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})]],2),a("p",[s._v("Use "),a("code",[s._v("el-time-picker")]),s._v(" label, and you can limit the time range by specifying "),a("code",[s._v("selectableRange")]),s._v(". By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the "),a("code",[s._v("arrow-control")]),s._v(" attribute is set.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("arrow-control")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("18")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v("),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("18")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("If start time is picked at first, then the end time will change accordingly.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n",script:"\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(t){s.startTime=t},expression:"startTime"}}),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(t){s.endTime=t},expression:"endTime"}})]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"startTime"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-select")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"endTime"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":picker-options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\"")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("startTime")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("endTime")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can pick an arbitrary time range.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}}),a("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})]],2),a("p",[s._v("We can pick a time range by adding an "),a("code",[s._v("is-range")]),s._v(" attribute. Also, "),a("code",[s._v("arrow-control")]),s._v(" is supported in range mode.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("is-range")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-time-picker")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("is-range")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("arrow-control")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value5"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("range-separator")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"To"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("start-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Start time"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("end-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"End time"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": ["),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v("), "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value5")]),s._v(": ["),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v("), "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2016")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v(")]\n };\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder in non-range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("placeholder for the start time in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("placeholder for the end time in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-range")]),a("td",[s._v("whether to pick a time range, only works with "),a("code",{pre:!0},[s._v("")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("arrow-control")]),a("td",[s._v("whether to pick time using arrow buttons, only works with "),a("code",{pre:!0},[s._v("")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of the picker")]),a("td",[s._v("Date for Time Picker, and string for Time Select")]),a("td",[s._v("hour "),a("code",{pre:!0},[s._v("HH")]),s._v(", minute "),a("code",{pre:!0},[s._v("mm")]),s._v(", second "),a("code",{pre:!0},[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left / center / right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for TimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("optional, default date of the calendar")]),a("td",[s._v("Date for TimePicker, string for TimeSelect")]),a("td",[s._v("anything accepted by "),a("code",{pre:!0},[s._v("new Date()")]),s._v(" for TimePicker, selectable value for TimeSelect")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value-format")]),a("td",[s._v("optional, only for TimePicker, format of bounded value")]),a("td",[s._v("string")]),a("td",[s._v("hour "),a("code",{pre:!0},[s._v("HH")]),s._v(", minute "),a("code",{pre:!0},[s._v("mm")]),s._v(", second "),a("code",{pre:!0},[s._v("ss")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",{pre:!0},[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("start time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("end time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("time step")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("minimum time, any time before this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("maximum time, any time after this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("available time range, e.g."),a("code",{pre:!0},[s._v("'18:30:00 - 20:30:00'")]),s._v("or"),a("code",{pre:!0},[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string / array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("hour "),a("code",{pre:!0},[s._v("HH")]),s._v(", minute "),a("code",{pre:!0},[s._v("mm")]),s._v(", second "),a("code",{pre:!0},[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when user confirms the value")]),a("td",[s._v("component's bounded value")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1099)},function(s,t,a){"use strict";function e(s){a(1100)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1102),n=a.n(l),r=a(1103),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1101);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("6dfdb32b",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".demo-tooltip.demo-en-US .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip.demo-en-US .box{width:400px}.demo-tooltip.demo-en-US .box .top{text-align:center}.demo-tooltip.demo-en-US .box .left{float:left;width:110px}.demo-tooltip.demo-en-US .box .right{float:right;width:110px}.demo-tooltip.demo-en-US .box .bottom{clear:both;text-align:center}.demo-tooltip.demo-en-US .box .item{margin:4px}.demo-tooltip.demo-en-US .box .left .el-tooltip__popper,.demo-tooltip.demo-en-US .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip.demo-en-US .box .el-tooltip{margin-left:0}.demo-tooltip.demo-en-US:first-of-type .source .el-button{width:110px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display prompt information for mouse hover.")]),s._m(1),a("p",[s._v("Tooltip has 9 placements.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n
    \n \n top-start\n \n \n top\n \n \n top-end\n \n
    \n
    \n \n left-start\n \n \n left\n \n \n left-end\n \n
    \n\n
    \n \n right-start\n \n \n right\n \n \n right-end\n \n
    \n
    \n \n bottom-start\n \n \n bottom\n \n \n bottom-end\n \n
    \n
    \n\n\n',script:null,style:"\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[a("el-button",[s._v("top-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[s._v("top")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[s._v("top-end")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[s._v("left-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[s._v("left")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[s._v("left-end")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[s._v("right-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[s._v("right")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[s._v("right-end")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[s._v("bottom-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[s._v("bottom")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[s._v("bottom-end")])],1)],1)])]),a("p",[s._v("Use attribute "),a("code",[s._v("content")]),s._v(" to set the display content when hover. The attribute "),a("code",[s._v("placement")]),s._v(" determines the position of the tooltip. Its value is "),a("code",[s._v("[orientation]-[alignment]")]),s._v(" with four orientations "),a("code",[s._v("top")]),s._v(", "),a("code",[s._v("left")]),s._v(", "),a("code",[s._v("right")]),s._v(", "),a("code",[s._v("bottom")]),s._v(" and three alignments "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(", "),a("code",[s._v("null")]),s._v(", and the default alignment is null. Take "),a("code",[s._v('placement="left-end"')]),s._v(" for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"box"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Top Left prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top-start"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top-start"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Top Center prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Top Right prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top-end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("top-end"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Left Top prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left-start"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left-start"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Left Center prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Left Bottom prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left-end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("left-end"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Right Top prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right-start"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right-start"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Right Center prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Right Bottom prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right-end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("right-end"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom Left prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom Center prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"dark"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom Right prompts info"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("bottom-end"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"undefined"}},[s._v("\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Dark\n\n\n Light\n\n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("effect")]),s._v(" to modify theme, and the default value is "),a("code",[s._v("dark")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Top center"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Bottom center"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Display multiple lines of text and set their format.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    multiple lines
    second line
    \n Top center\n    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{attrs:{slot:"content"},slot:"content"},[s._v("multiple lines"),a("br"),s._v("second line")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("Override attribute "),a("code",[s._v("content")]),s._v(" of "),a("code",[s._v("el-tooltip")]),s._v(" by adding a slot named "),a("code",[s._v("content")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"content"')]),s._v(">")]),s._v("multiple lines"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("br")]),s._v("/>")]),s._v("second line"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),s._m(6),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .slide-fade-enter-active {\n transition: all .3s ease;\n }\n .slide-fade-leave-active {\n transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n }\n .slide-fade-enter, .expand-fade-leave-active {\n margin-left: 20px;\n opacity: 0;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("click to "+s._s(s.disabled?"active":"close")+" tooltip function")])],1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tooltip")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":disabled")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"disabled"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"click to close tooltip function"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placement")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"bottom"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("effect")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("click to {{disabled ? 'active' : 'close'}} tooltip function"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-enter-active")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("transition")]),s._v(": all ."),a("span",{attrs:{class:"hljs-number"}},[s._v("3s")]),s._v(" ease;\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-leave-active")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("transition")]),s._v(": all ."),a("span",{attrs:{class:"hljs-number"}},[s._v("3s")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("cubic-bezier")]),s._v("(1.0, 0.5, 0.8, 1.0);\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".slide-fade-enter")]),s._v(", "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".expand-fade-leave-active")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("opacity")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Theme")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip has two themes: "),a("code",{pre:!0},[s._v("dark")]),s._v(" and "),a("code",{pre:!0},[s._v("light")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" More Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"advanced-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Advanced usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("transition")]),s._v(" attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("disabled")]),s._v(" attribute allows you to disable "),a("code",{pre:!0},[s._v("tooltip")]),s._v(". You just need set it to "),a("code",{pre:!0},[s._v("true")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In fact, Tooltip is an extension based on "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(", you can use any attribute that are allowed in Vue-popper.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("The "),a("code",{pre:!0},[s._v("router-link")]),s._v(" component is not supported in tooltip, please use "),a("code",{pre:!0},[s._v("vm.$router.push")]),s._v(".")]),a("p",[s._v("Disabled form elements are not supported in tooltip, see more information at "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v(", please wrap disabled form elements.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("Tooltip theme")]),a("td",[s._v("string")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("display content, can be overridden by "),a("code",{pre:!0},[s._v("slot#content")])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("position of Tooltip")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("visibility of Tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tooltip is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset of the Tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("animation name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether an arrow is displayed. For more information, check "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" page")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" parameters")]),a("td",[s._v("Object")]),a("td",[s._v("refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" doc")]),a("td",[a("code",{pre:!0},[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("whether to control Tooltip manually. "),a("code",{pre:!0},[s._v("mouseenter")]),s._v(" and "),a("code",{pre:!0},[s._v("mouseleave")]),s._v(" won't have effects if set to "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Tooltip's popper")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("whether the mouse can enter the tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("hide-after")]),a("td",[s._v("timeout in milliseconds to hide tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1105)},function(s,t,a){"use strict";function e(s){a(1106)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1108),n=a.n(l),r=a(1109),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1107);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("06dfca66",e,!0)},function(s,t,a){t=s.exports=a(69)(void 0),t.push([s.i,".demo-transfer .transfer-footer{margin-left:15px;padding:6px 5px}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{data:function(s){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4==0});return t}(),data2:function(s){var t=[],a=["CA","IL","MD","TX","FL","CO","CT"];return["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(s,e){t.push({label:s,key:e,initial:a[e]})}),t}(),data3:function(s){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"Option "+a,disabled:a%4==0});return t}(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,t){return t.initial.toLowerCase().indexOf(s.toLowerCase())>-1},renderFunc:function(s,t){return s("span",null,[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value1: [1, 4]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})]],2),a("p",[s._v("Data is passed to Transfer via the "),a("code",[s._v("data")]),s._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),a("code",[s._v("key")]),s._v(" being the identification of the data item, "),a("code",[s._v("label")]),s._v(" being the displayed text, and "),a("code",[s._v("disabled")]),s._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),a("code",[s._v("v-model")]),s._v(", and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the "),a("code",[s._v("v-model")]),s._v(" with an array.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData = "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),a("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": i,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Option "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": generateData(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value1")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v("]\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can search and filter data items.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n const generateData2 = _ => {\n const data = [];\n const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n states.forEach((city, index) => {\n data.push({\n label: city,\n key: index,\n initial: initials[index]\n });\n });\n return data;\n };\n return {\n data2: generateData2(),\n value2: [],\n filterMethod(query, item) {\n return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-transfer",{attrs:{filterable:"","filter-method":s.filterMethod,"filter-placeholder":"State Abbreviations",data:s.data2},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Set the "),a("code",[s._v("filterable")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to enable filter mode. By default, if the data item "),a("code",[s._v("label")]),s._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),a("code",[s._v("filter-method")]),s._v(" attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":filter-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filterMethod"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filter-placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"State Abbreviations"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData2 = "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" states = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'California'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Illinois'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Maryland'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Texas'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Florida'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Colorado'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Connecticut '")]),s._v("];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" initials = ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'CA'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'IL'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MD'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'TX'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'FL'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CO'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'CT'")]),s._v("];\n states.forEach("),a("span",{attrs:{class:"hljs-function"}},[s._v("("),a("span",{attrs:{class:"hljs-params"}},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n data.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": city,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": index,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("initial")]),s._v(": initials[index]\n });\n });\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": generateData2(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value2")]),s._v(": [],\n filterMethod(query, item) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" item.initial.toLowerCase().indexOf(query.toLowerCase()) > "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n }\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value3: [1],\n renderFunc(h, option) {\n return { option.key } - { option.label };\n }\n };\n },\n\n methods: {\n handleChange(value, direction, movedKeys) {\n console.log(value, direction, movedKeys);\n }\n }\n };\n",style:"\n .transfer-footer {\n margin-left: 20px;\n padding: 6px 5px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-transfer",{attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[s._v("Operation")]),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[s._v("Operation")])],1)]],2),a("p",[s._v("Use "),a("code",[s._v("titles")]),s._v(", "),a("code",[s._v("button-texts")]),s._v(", "),a("code",[s._v("render-content")]),s._v(" and "),a("code",[s._v("format")]),s._v(" to respectively customize list titles, button texts, render function for data items, checking status texts in list header. For list footer contents, two named slots are provided: "),a("code",[s._v("left-footer")]),s._v(" and "),a("code",[s._v("right-footer")]),s._v(". Plus, if you want some items initially checked, you can use "),a("code",[s._v("left-default-checked")]),s._v(" and "),a("code",[s._v("right-default-checked")]),s._v(". Finally, this example demonstrate the "),a("code",[s._v("change")]),s._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterable")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":left-default-checked")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":right-default-checked")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[1]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":render-content")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"renderFunc"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":titles")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['Source', 'Target']\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":button-texts")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['To left', 'To right']\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":format")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n noChecked: '${total}',\n hasChecked: '${checked}/${total}'\n }\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"left-footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transfer-footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"right-footer"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transfer-footer")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-left")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6px")]),s._v(" "),a("span",{attrs:{class:"hljs-number"}},[s._v("5px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData = "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),a("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("key")]),s._v(": i,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Option "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": generateData(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value3")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("],\n renderFunc(h, option) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"xml"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")])]),s._v(";\n }\n };\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(value, direction, movedKeys) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n const generateData3 = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n value: i,\n desc: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data3: generateData3(),\n value4: []\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})]],2),a("p",[s._v("The data items in this example do not have "),a("code",[s._v("key")]),s._v("s or "),a("code",[s._v("label")]),s._v("s, instead they have "),a("code",[s._v("value")]),s._v("s and "),a("code",[s._v("desc")]),s._v("s. So you need to set aliases for "),a("code",[s._v("key")]),s._v(" and "),a("code",[s._v("label")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-transfer")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"value4"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{\n key: 'value',\n label: 'desc'\n }\"")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" generateData3 = "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [];\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("for")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" i = "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("; i <= "),a("span",{attrs:{class:"hljs-number"}},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": i,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("desc")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Option "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": i % "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(" === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n });\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data;\n };\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data3")]),s._v(": generateData3(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value4")]),s._v(": []\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"transfer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prop-aliases"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prop aliases")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("By default, Transfer looks for "),a("code",{pre:!0},[s._v("key")]),s._v(", "),a("code",{pre:!0},[s._v("label")]),s._v(" and "),a("code",{pre:!0},[s._v("disabled")]),s._v(" in a data item. If your data items have different key names, you can use the "),a("code",{pre:!0},[s._v("props")]),s._v(" attribute to define aliases.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("data source")]),a("td",[s._v("array[{ key, label, disabled }]")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Transfer is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-placeholder")]),a("td",[s._v("placeholder for the filter input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Enter keyword")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("titles")]),a("td",[s._v("custom list titles")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['List 1', 'List 2']")])]),a("tr",[a("td",[s._v("button-texts")]),a("td",[s._v("custom button texts")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("custom render function for data items")]),a("td",[s._v("function(h, option)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("texts for checking status in list header")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("prop aliases for data source")]),a("td",[s._v("object{key, label, disabled}")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("left-default-checked")]),a("td",[s._v("key array of initially checked data items of the left list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("right-default-checked")]),a("td",[s._v("key array of initially checked data items of the right list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("left-footer")]),a("td",[s._v("content of left list footer")])]),a("tr",[a("td",[s._v("right-footer")]),a("td",[s._v("content of right list footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when data items change in the right list")]),a("td",[s._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1111)},function(s,t,a){"use strict";function e(s){a(1112)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1114),n=a.n(l),r=a(1115),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1113);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("325eab2e",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show=!s.show}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),a("p",[s._v("We have two fading effects: "),a("code",[s._v("el-fade-in-linear")]),s._v(" and "),a("code",[s._v("el-fade-in")]),s._v(".")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show2: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show2=!s.show2}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),a("p",[a("code",[s._v("el-zoom-in-center")]),s._v(", "),a("code",[s._v("el-zoom-in-top")]),s._v(" and "),a("code",[s._v("el-zoom-in-bottom")]),s._v(" are provided.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show2")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show3: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show3=!s.show3}}},[s._v("Click Me")]),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")]),a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")])])])],1)],1)]],2),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"show3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show3")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".transition-box")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-bottom")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("200px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40px")]),s._v(" "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("margin-right")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("20px")]),s._v(";\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"built-in-transition"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[s._v("¶")]),s._v(" Built-in transition")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use Element's built-in transitions directly. Before that, please read the "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[s._v("transition docs")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fade"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[s._v("¶")]),s._v(" fade")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[s._v("¶")]),s._v(" zoom")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("For collapse effect, use the "),a("code",{pre:!0},[s._v("el-collapse-transition")]),s._v(" component.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-js"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("// fade/zoom")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/theme-defaut/base.css'")]),s._v(";\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// collapse")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" CollapseTransition "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'element-ui/lib/transitions/collapse-transition'")]),s._v(";\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1117)},function(s,t,a){"use strict";function e(s){a(1118)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1120),n=a.n(l),r=a(1121),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1119);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("68540d62",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],l=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],n=[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],r=1e3,v=[{name:"region1"},{name:"region2"}],_=1,c={label:"name",children:"zones"},i={label:"name",children:"zones",isLeaf:"leaf"},o={children:"children",label:"label"};t.default={watch:{filterText:function(s){this.$refs.tree2.filter(s)}},methods:{handleCheckChange:function(s,t,a){console.log(s,t,a)},handleNodeClick:function(s){console.log(s)},loadNode:function(s,t){if(0===s.level)return t([{name:"Root1"},{name:"Root2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s=void 0;s=a?[{name:"zone"+_++},{name:"zone"+_++}]:[],t(s)},500)},loadNode1:function(s,t){return 0===s.level?t([{name:"region"}]):s.level>1?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)},getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"二级 2-1"},{id:9,label:"三级 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])},append:function(s,t){var a={id:r++,label:"testtest",children:[]};s.append(a,t),t.children=t.children||[],t.children.push(a)},remove:function(s,t,a){var e=t.parent,l=e.data.children.findIndex(function(s){return s.id===a.id});e.data.children.splice(l,1),s.remove(a)},renderContent:function(s,t){var a=this,e=t.node,l=t.data,n=t.store;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,[e.label])]),s("span",null,[s("el-button",{style:"font-size: 12px;",attrs:{type:"text"},on:{click:function(){return a.append(n,l)}}},["Append"]),s("el-button",{style:"font-size: 12px;",attrs:{type:"text"},on:{click:function(){return a.remove(n,e,l)}}},["Delete"])])])},filterNode:function(s,t){return!s||-1!==t.label.indexOf(s)}},data:function(){return{data:e,data2:l,data3:n,regions:v,defaultProps:o,props:c,props1:i,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display a set of data with hierarchies.")]),s._m(1),a("p",[s._v("Basic tree structure.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n data: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1',\n children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@node-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n props: {\n label: 'name',\n children: 'zones'\n },\n count: 1\n };\n },\n methods: {\n handleCheckChange(data, checked, indeterminate) {\n console.log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n console.log(data);\n },\n loadNode(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n }\n if (node.level > 3) return resolve([]);\n\n var hasChild;\n if (node.data.name === 'region1') {\n hasChild = true;\n } else if (node.data.name === 'region2') {\n hasChild = false;\n } else {\n hasChild = Math.random() > 0.5;\n }\n\n setTimeout(() => {\n var data;\n if (hasChild) {\n data = [{\n name: 'zone' + this.count++\n }, {\n name: 'zone' + this.count++\n }];\n } else {\n data = [];\n }\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":load")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"loadNode"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("lazy")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@check-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'name'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zones'")]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("count")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleCheckChange(data, checked, indeterminate) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n },\n loadNode(node, resolve) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([{ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Root1'")]),s._v(" }, { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Root2'")]),s._v(" }]);\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level > "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(") "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([]);\n\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" hasChild;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.data.name === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'region1'")]),s._v(") {\n hasChild = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.data.name === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'region2'")]),s._v(") {\n hasChild = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(";\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n hasChild = "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random() > "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v(";\n }\n\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" data;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (hasChild) {\n data = [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v(" + "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".count++\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v(" + "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".count++\n }];\n } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n data = [];\n }\n\n resolve(data);\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("500")]),s._v(");\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n props1: {\n label: 'name',\n children: 'zones',\n isLeaf: 'leaf'\n },\n };\n },\n methods: {\n loadNode1(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'region' }]);\n }\n if (node.level > 1) return resolve([]);\n\n setTimeout(() => {\n const data = [{\n name: 'leaf',\n leaf: true\n }, {\n name: 'zone'\n }];\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{props:s.props1,load:s.loadNode1,lazy:"","show-checkbox":""}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":load")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"loadNode1"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("lazy")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("props1")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'name'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zones'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("isLeaf")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'leaf'")]),s._v("\n },\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n loadNode1(node, resolve) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level === "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([{ "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'region'")]),s._v(" }]);\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (node.level > "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(") "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" resolve([]);\n\n setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" data = [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'leaf'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("leaf")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'zone'")]),s._v("\n }];\n\n resolve(data);\n }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("500")]),s._v(");\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("The checkbox of a node can be set as disabled.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data3: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 3,\n label: 'Level two 2-1',\n children: [{\n id: 4,\n label: 'Level three 3-1-1'\n }, {\n id: 5,\n label: 'Level three 3-1-2',\n disabled: true\n }]\n }, {\n id: 2,\n label: 'Level two 2-2',\n disabled: true,\n children: [{\n id: 6,\n label: 'Level three 3-2-1'\n }, {\n id: 7,\n label: 'Level three 3-2-2',\n disabled: true\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label',\n disabled: 'disabled',\n },\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data3,props:s.defaultProps,"show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("p",[s._v("In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@check-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }]\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("disabled")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'disabled'")]),s._v(",\n },\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Tree nodes can be initially expanded or checked")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("Use "),a("code",[s._v("default-expanded-keys")]),s._v(" and "),a("code",[s._v("default-checked-keys")]),s._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),a("code",[s._v("node-key")]),s._v(" is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-expanded-keys")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":default-checked-keys")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"[5]"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n
    \n get by node\n get by key\n set by node\n set by key\n reset\n
    \n\n\n',script:"\n export default {\n methods: {\n getCheckedNodes() {\n console.log(this.$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n console.log(this.$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n this.$refs.tree.setCheckedNodes([{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 9,\n label: 'Level three 1-1-1'\n }]);\n },\n setCheckedKeys() {\n this.$refs.tree.setCheckedKeys([3]);\n },\n resetChecked() {\n this.$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:s.getCheckedNodes}},[s._v("get by node")]),a("el-button",{on:{click:s.getCheckedKeys}},[s._v("get by key")]),a("el-button",{on:{click:s.setCheckedNodes}},[s._v("set by node")]),a("el-button",{on:{click:s.setCheckedKeys}},[s._v("set by key")]),a("el-button",{on:{click:s.resetChecked}},[s._v("reset")])],1)],1),a("p",[s._v("This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, "),a("code",[s._v("node-key")]),s._v(" is required.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("show-checkbox")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("node-key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"id"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tree"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("highlight-current")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"buttons"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("get by node"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("get by key"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("set by node"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("set by key"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"resetChecked"')]),s._v(">")]),s._v("reset"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n getCheckedNodes() {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }]);\n },\n setCheckedKeys() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v("]);\n },\n resetChecked() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n let id = 1000;\n\n export default {\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n }\n },\n\n methods: {\n append(store, data) {\n const newChild = { id: id++, label: 'testtest', children: [] };\n store.append(newChild, data); // need change data by yourself\n data.children = data.children || [];\n data.children.push(newChild);\n },\n\n remove(store, node, data) {\n const parent = node.parent;\n const index = parent.data.children.findIndex(d => d.id === data.id);\n parent.data.children.splice(index, 1);\n store.remove(data); // need change data by yourself\n },\n\n renderContent(h, { node, data, store }) {\n return (\n \n \n {node.label}\n \n \n this.append(store, data) }>Append\n this.remove(store, node, data) }>Delete\n \n );\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data2,props:s.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("p",[s._v("Use "),a("code",[s._v("render-content")]),s._v(" to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!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(":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("")]),s._v("\n\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 data2: [{\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n children: [{\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n children: [{\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n children: [{\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n children: [{\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n id: "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n label: "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n 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(store, 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 store.append(newChild, data); "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// need change data by yourself")]),s._v("\n data.children = data.children || [];\n data.children.push(newChild);\n },\n\n remove(store, 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(" index = parent.data.children.findIndex(d => d.id === data.id);\n parent.data.children.splice(index, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(");\n store.remove(data); "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// need change data by yourself")]),s._v("\n },\n\n renderContent(h, { node, data, store }) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" (\n \n \n {node.label}\n \n \n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".append(store, data) }>Append\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".remove(store, node, data) }>Delete\n \n );\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("Tree nodes can be filtered")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n\n',script:"\n export default {\n watch: {\n filterText(val) {\n this.$refs.tree2.filter(val);\n }\n },\n\n methods: {\n filterNode(value, data) {\n if (!value) return true;\n return data.label.indexOf(value) !== -1;\n }\n },\n\n data() {\n return {\n filterText: '',\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:s.filterText,callback:function(t){s.filterText=t},expression:"filterText"}}),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),a("p",[s._v("Invoke the "),a("code",[s._v("filter")]),s._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),a("code",[s._v("filter-node-method")]),s._v(" is required, and its value is the filtering method.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-input")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("placeholder")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"Filter keyword"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filter-tree"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("default-expand-all")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":filter-node-method")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"filterNode"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("watch")]),s._v(": {\n filterText(val) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n }\n },\n\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n filterNode(value, data) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!value) "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(";\n }\n },\n\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("filterText")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data2")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("10")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Only one node among the same level can be expanded at one time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1',\n children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-tree")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":props")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"defaultProps"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("accordion")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@node-click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-1'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level two 3-2'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("defaultProps")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("children")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'children'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(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)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"selectable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selectable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-leaf-node-in-lazy-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-leaf-node-in-lazy-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom leaf node in lazy mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"default-expanded-and-default-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default expanded and default checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checking-tree-nodes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checking tree nodes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-node-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom node content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[a("code",{pre:!0},[s._v("Append")]),s._v(" and "),a("code",{pre:!0},[s._v("remove")]),s._v(" do not change "),a("code",{pre:!0},[s._v("data")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tree-node-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree node filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("tree data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("text displayed when data is void")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("unique identity key name for nodes, its value should be unique across the whole tree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("method for loading subtree data")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("render function for tree node")]),a("td",[s._v("Function(h, { node }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("whether current node is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("whether to expand all nodes by default")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("td",[s._v("whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.")]),a("td",[s._v("—")]),a("td",[s._v("true")]),a("td")]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("whether to expand father node when a child node is expanded")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("array of keys of initially expanded nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("whether node is selectable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("whether checked state of a node not affects its father and child nodes when "),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" is "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("array of keys of initially checked nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("this function will be executed on each node when use filter method. if return "),a("code",{pre:!0},[s._v("false")]),s._v(", tree node will be hidden.")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether only one node among the same level can be expanded at one time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("horizontal indentation of nodes in adjacent levels in pixels")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of node object is used as the node's label")]),a("td",[s._v("string, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which node object is used as the node's subtree")]),a("td",[s._v("string, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of node object represents if node's checkbox is disabled")]),a("td",[s._v("boolean, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("isLeaf")]),a("td",[s._v("specify whether the node is a leaf node")]),a("td",[s._v("boolean, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Tree")]),s._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("filter all tree nodes, filtered nodes will be hidden")]),a("td",[s._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),a("tr",[a("td",[s._v("updateKeyChildren")]),a("td",[s._v("set new data to node, only works when "),a("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(key, data) Accept two parameters: 1. key of node 2. new data")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("If the node can be selected ("),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v("), it returns the currently selected array of nodes")]),a("td",[s._v("Accept a boolean type parameter whose default value is "),a("code",{pre:!0},[s._v("false")]),s._v(". If the parameter is "),a("code",{pre:!0},[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("an array of nodes to be checked")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("If the node can be selected ("),a("code",{pre:!0},[s._v("show-checkbox")]),s._v(" is "),a("code",{pre:!0},[s._v("true")]),s._v("), it returns the currently selected array of node's keys")]),a("td",[s._v("(leafOnly) Accept a boolean type parameter whose default value is "),a("code",{pre:!0},[s._v("false")]),s._v(". If the parameter is "),a("code",{pre:!0},[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is "),a("code",{pre:!0},[s._v("false")]),s._v(". If the parameter is "),a("code",{pre:!0},[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("set node to be checked or not, only works when "),a("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not.")])]),a("tr",[a("td",[s._v("getCurrentKey")]),a("td",[s._v("return the highlight node's key (null if no node is highlighted)")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("getCurrentNode")]),a("td",[s._v("return the highlight node (null if no node is highlighted)")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("setCurrentKey")]),a("td",[s._v("set highlighted node by key, only works when "),a("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(key) the node's key to be highlighted")])]),a("tr",[a("td",[s._v("setCurrentNode")]),a("td",[s._v("set highlighted node, only works when "),a("code",{pre:!0},[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(node) the node to be highlighted")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("triggers when a node is clicked")]),a("td",[s._v("three parameters: node object corresponding to the node clicked, "),a("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("triggers when the selected state of the node changes")]),a("td",[s._v("three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current node changes")]),a("td",[s._v("two parameters: node object corresponding to the current node, "),a("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("triggers when current node open")]),a("td",[s._v("three parameters: node object corresponding to the node opened, "),a("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("triggers when current node close")]),a("td",[s._v("three parameters: node object corresponding to the node closed, "),a("code",{pre:!0},[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1123)},function(s,t,a){"use strict";function e(s){a(1124)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1126),n=a(0),r=e,v=n(null,l.a,!1,r,null,null);t.default=v.exports},function(s,t,a){var e=a(1125);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("5b9dc64d",e,!0)},function(s,t,a){t=s.exports=a(69)(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 e=function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography")]),a("p",[s._v("We create a font convention to ensure the best presentation across different platforms.")]),a("h3",{attrs:{id:"chinese-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chinese-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" Chinese Font")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"english-numberic-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#english-numberic-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" English / Numberic Font")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family")]),a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-css"}},[a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("font-family")]),s._v(': "'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Neue")]),s._v('",'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Helvetica")]),s._v(',"'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("PingFang")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("SC")]),s._v('","'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Hiragino")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Sans")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("GB")]),s._v('","'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Microsoft")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("Arial")]),s._v(","),a("span",{attrs:{class:"hljs-selector-tag"}},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"font-convention"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font Convention")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("Main Title")]),a("td",{staticClass:"h1"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("20px Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("Title")]),a("td",{staticClass:"h2"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("Small Title")]),a("td",{staticClass:"h3"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("Body")]),a("td",{staticClass:"text-regular"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("Body (small)")]),a("td",{staticClass:"text-small"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("Supplementary text")]),a("td",{staticClass:"text-smaller"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}],n={render:e,staticRenderFns:l};t.a=n},function(s,t,a){s.exports=a(1128)},function(s,t,a){"use strict";function e(s){a(1129)}Object.defineProperty(t,"__esModule",{value:!0});var l=a(1131),n=a.n(l),r=a(1132),v=a(0),_=e,c=v(n.a,r.a,!1,_,null,null);t.default=c.exports},function(s,t,a){var e=a(1130);"string"==typeof e&&(e=[[s.i,e,""]]),e.locals&&(s.exports=e.locals);a(517)("59e1eea2",e,!0)},function(s,t,a){t=s.exports=a(69)(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:hover{border-color:#409eff}.demo-box .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.demo-box .avatar-uploader .avatar{width:178px;height:178px;display:block}",""])},function(s,t,a){"use strict";t.__esModule=!0,t.default={data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList2:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList3:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],imageUrl:"",dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(s,t){console.log(s,t)},beforeUpload:function(s){return!(s.size>4e7)||(console.warn(s.name+" is too large!"),!1)},handlePreview:function(s){console.log(s)},handlePictureCardPreview:function(s){this.dialogImageUrl=s.url,this.dialogVisible=!0},submitUpload:function(){this.$refs.upload.submit()},handleAvatarSuccess:function(s,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(s){var t="image/jpeg"===s.type,a=s.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),a||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)},handleExceed:function(s,t){this.$message.warning("You can upload up to 3 files. You selected "+s.length+" files this time, and "+(s.length+t.length)+" files totally")}}}},function(s,t,a){"use strict";var e=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Upload files by clicking or drag-and-drop")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n },\n handleExceed(files, fileList) {\n this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);\n }\n }\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,multiple:"",limit:3,"on-exceed":s.handleExceed,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("p",[s._v("Customize upload button type and text using "),a("code",[s._v("slot")]),s._v(". Set "),a("code",[s._v("limit")]),s._v(" and "),a("code",[s._v("on-exceed")]),s._v(" to limit the maximum number of uploads allowed and specify method when the limit is exceeded.")]),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!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("multiple")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":limit")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"3"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-exceed")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleExceed"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileList"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fileList")]),s._v(": [{"),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file);\n },\n handleExceed(files, fileList) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.warning("),a("span",{attrs:{class:"hljs-string"}},[s._v("`The limit is 3, you selected "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${files.length}")]),s._v(" files this time, add up to "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${files.length + fileList.length}")]),s._v(" totally`")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n imageUrl: ''\n };\n },\n methods: {\n handleAvatarSuccess(res, file) {\n this.imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n const isJPG = file.type === 'image/jpeg';\n const isLt2M = file.size / 1024 / 1024 < 2;\n\n if (!isJPG) {\n this.$message.error('Avatar picture must be JPG format!');\n }\n if (!isLt2M) {\n this.$message.error('Avatar picture size can not exceed 2MB!');\n }\n return isJPG && isLt2M;\n }\n }\n }\n",style:"\n .avatar-uploader .el-upload {\n border: 1px dashed #d9d9d9;\n border-radius: 6px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n .avatar-uploader .el-upload:hover {\n border-color: #409EFF;\n }\n .avatar-uploader-icon {\n font-size: 28px;\n color: #8c939d;\n width: 178px;\n height: 178px;\n line-height: 178px;\n text-align: center;\n }\n .avatar {\n width: 178px;\n height: 178px;\n display: block;\n }\n"}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?a("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"avatar-uploader"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":show-file-list")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-success")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleAvatarSuccess"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":before-upload")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"imageUrl"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"imageUrl"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"avatar"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("style")]),s._v(">")]),a("span",{attrs:{class:"css"}},[s._v("\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-upload")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1px")]),s._v(" dashed "),a("span",{attrs:{class:"hljs-number"}},[s._v("#d9d9d9")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("position")]),s._v(": relative;\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("overflow")]),s._v(": hidden;\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader")]),s._v(" "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".el-upload")]),a("span",{attrs:{class:"hljs-selector-pseudo"}},[s._v(":hover")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar-uploader-icon")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("font-size")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("28px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("color")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("#8c939d")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("text-align")]),s._v(": center;\n }\n "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".avatar")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("width")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("178px")]),s._v(";\n "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": block;\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("imageUrl")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleAvatarSuccess(res, file) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{attrs:{class:"hljs-string"}},[s._v("'image/jpeg'")]),s._v(";\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" / "),a("span",{attrs:{class:"hljs-number"}},[s._v("1024")]),s._v(" < "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(";\n\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!isJPG) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Avatar picture must be JPG format!'")]),s._v(");\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!isLt2M) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$message.error("),a("span",{attrs:{class:"hljs-string"}},[s._v("'Avatar picture size can not exceed 2MB!'")]),s._v(");\n }\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" isJPG && isLt2M;\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n\n\n \n\n\n',script:"\n export default {\n data() {\n return {\n dialogImageUrl: '',\n dialogVisible: false\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePictureCardPreview(file) {\n this.dialogImageUrl = file.url;\n this.dialogVisible = true;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),a("el-dialog",{attrs:{size:"tiny"},model:{value:s.dialogVisible,callback:function(t){s.dialogVisible=t},expression:"dialogVisible"}},[a("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("list-type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"picture-card"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handlePictureCardPreview"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-plus"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-dialog")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),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("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dialogImageUrl")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("''")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("dialogVisible")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePictureCardPreview(file) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dialogVisible = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(";\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileList2"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("list-type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"picture"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fileList2")]),s._v(": [{"),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(file);\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList3: [{\n name: 'food.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }, {\n name: 'food2.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }]\n };\n },\n methods: {\n handleChange(file, fileList) {\n this.fileList3 = fileList.slice(-3);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleChange"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileList3"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("fileList3")]),s._v(": [{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food.jpeg'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'finished'")]),s._v("\n }, {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'food2.jpeg'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("status")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'finished'")]),s._v("\n }]\n };\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n handleChange(file, fileList) {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{attrs:{class:"hljs-number"}},[s._v("-3")]),s._v(");\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("You can drag your file to a certain area to upload it.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Drop file here or click to upload
    \n
    jpg/png files with a size less than 500kb
    \n    \n',script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,multiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("Drop file here or "),a("em",[s._v("click to upload")])]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])])],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("drag")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-preview")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handlePreview"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":on-remove")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"handleRemove"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":file-list")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"fileList"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("multiple")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__text"')]),s._v(">")]),s._v("Drop file here or "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("em")]),s._v(">")]),s._v("click to upload"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n select file\n upload to server\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n methods: {\n submitUpload() {\n this.$refs.upload.submit();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[a("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[s._v("select file")]),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("upload to server")]),a("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("pre",{pre:!0},[a("code",{attrs:{class:"hljs language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-upload")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload-demo"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"upload"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("action")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":auto-upload")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"trigger"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"primary"')]),s._v(">")]),s._v("select file"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("el-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"margin-left: 10px;"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("size")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"small"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"submitUpload"')]),s._v(">")]),s._v("upload to server"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n submitUpload() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.upload.submit();\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},l=[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"click-to-upload-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Click to upload files")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"user-avatar-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" User avatar upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",{pre:!0},[s._v("before-upload")]),s._v(" hook to limit the upload file format and size.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"photo-wall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[s._v("¶")]),s._v(" Photo Wall")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",{pre:!0},[s._v("list-type")]),s._v(" to change the fileList style.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filelist-with-thumbnail"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[s._v("¶")]),s._v(" FileList with thumbnail")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"file-list-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[s._v("¶")]),s._v(" File list control")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",{pre:!0},[s._v("on-change")]),s._v(" hook function to control upload file list")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"drag-to-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Drag to upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"manual-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Manual upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("action")]),a("td",[s._v("required, request URL")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("headers")]),a("td",[s._v("request headers")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether uploading multiple files is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("data")]),a("td",[s._v("additions options of request")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("key name for uploaded file")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("file")])]),a("tr",[a("td",[s._v("with-credentials")]),a("td",[s._v("whether cookies are sent")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-file-list")]),a("td",[s._v("whether to show the uploaded file list")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("drag")]),a("td",[s._v("whether to activate drag and drop mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("accept")]),a("td",[s._v("accepted "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("file types")]),s._v(", will not work when "),a("code",{pre:!0},[s._v("thumbnail-mode")]),s._v(" is "),a("code",{pre:!0},[s._v("true")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-preview")]),a("td",[s._v("hook function when clicking the uploaded files")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-remove")]),a("td",[s._v("hook function when files are removed")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-success")]),a("td",[s._v("hook function when uploaded successfully")]),a("td",[s._v("function(response, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-error")]),a("td",[s._v("hook function when some errors occurs")]),a("td",[s._v("function(err, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-progress")]),a("td",[s._v("hook function when some progress occurs")]),a("td",[s._v("function(event, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-change")]),a("td",[s._v("hook function when select file or upload file success or upload file fail")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-upload")]),a("td",[s._v("hook function before uploading with the file to be uploaded as its parameter. If "),a("code",{pre:!0},[s._v("false")]),s._v(" is returned or a "),a("code",{pre:!0},[s._v("Promise")]),s._v(" is returned and then is rejected, uploading will be aborted")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("thumbnail-mode")]),a("td",[s._v("whether thumbnail is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("file-list")]),a("td",[s._v("default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[]")])]),a("tr",[a("td",[s._v("list-type")]),a("td",[s._v("type of fileList")]),a("td",[s._v("string")]),a("td",[s._v("text/picture/picture-card")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("auto-upload")]),a("td",[s._v("whether to auto upload file")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("http-request")]),a("td",[s._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable upload")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("limit")]),a("td",[s._v("maximum number of uploads allowed")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-exceed")]),a("td",[s._v("hook function when limit is exceeded")]),a("td",[s._v("function(files, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Methods Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearFiles")]),a("td",[s._v("clear the uploaded file list (this method is not supported in the "),a("code",{pre:!0},[s._v("before-upload")]),s._v(" hook)")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("abort")]),a("td",[s._v("cancel upload request")]),a("td",[s._v("（ file: fileList's item ）")])])])])}],n={render:e,staticRenderFns:l};t.a=n}])); \ No newline at end of file diff --git a/2.0/en-US.f005e1b.js b/2.0/en-US.f005e1b.js deleted file mode 100644 index d9c6ebcaf..000000000 --- a/2.0/en-US.f005e1b.js +++ /dev/null @@ -1,68 +0,0 @@ -webpackJsonp([2,4],Array(49).concat([function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAESRJREFUeAHtnW2IHdUZx88zu+vuvZtk12gikYoIyoJFEPvBqEVCrLTWqKWIUomCGPxoIa1WpSBS32ratM3HNlKIYjHkQ9VYC9YgoWryoSJtFZYIQQSDiYm72d177ya78/T/zL1ze/fufZm5d2bumZln4DJv5+U5/+d3z5kzc2YOGV1WKHCW+WJTNlPLZKaI3SnDZoMhWov1Wibjram2NrKWhc0ctue4tqba2jDL8VNMzvQQm2lTMNPriL5ekWHOdyiv5Wfm8dlFcxPguY5cd4qJBLYpNrw+Tk3I0BlAOU3M0+w409j+aGLUvE9EC3Hma2vauQEQwI3OV8zmJdfdihptKwp+PY6N2OAYwHeejTmKGvPQsOMcWjNmjuDYog22xW1DpgGcrfBVaBbvhmNvgYNvxLoQt6CRpE9UhmM+wB/lXTT3BybG6Fgk6VqYSOYAnGVezyVzryG+HzXcDRZqHtok1IYfGqaXqWhemyA04RlaMgGgNKUzJXM7ATr4Zhv2L8iQj+pFAYjnsHOQAeNk0bwlTXf9ZEo3Ug3gPPMlS2V3J2qHh9B5uCilPujJbHRmTqOWf2m44OxeQ/RVT4lYECmVAJZKfNmicR+DE3agthuzQMeBmYBasII/395R47xYLNIXAzOkx4xTBSA6FVfysvs4Ls4fkGa3xzJnMprXHDPvoyHnBXRaPktLIVMBoNebdd2njaF7AN5QWsQdhJ0AcRl3xveT4zyVht6z1QACtsJMyX0Soj6K7dFBODSteUKzRWi2a7LoPIftsq3lsBbAsxXe5rq8ByJeYat4abAL8B13HHpk3RgdtNFe6wAsl/nyCvMfcNP4LhsFS61NRK+PEf20UKDPbSqDY4sxqOmGZsr8OOD7VOGLwSv4Q4u2orFoHUMOPSVpRQ24wLzpfJlfhTBbeiqFRgqlAJrl90YKdN840YlQEWMIPHAAZyp8q1nmV3Ava2MM5dMk2yiAe6gnzRBtnxyjd9oESeTwwJpgr8ldWH7GuPx3hS8RX6/IxNMc2s/AB4NskgdSAy4s8KXniP+Ca72bV6iiO4NRgOjwBUw/GR+nL5M2IHEAZ0ss4/DexD9wQ9KF1fzaK4Am+RSuDe+YKNLR9qGiP5NoE4wnGre5hg8pfNE7st8UxSfiG/FRv2mFiZ8YgLNl3s4uv4FmtxjGQA2boALwjfhIfJVUrokA+E2Jd6LZ3YffcFIF03x6U0B8JL4Sn/WWQrhYsV4DoiA0W3Z/jWHxj4YzS0PboABeB9g1UXB+gWtDvNEQzxIbgB58JfdPsPyheEzXVJNQAIDsnSg6D8cFYWxNsFfzKXxJMBJrHqhAdogv48oklhrQu35g97dxGa3pDkABcn52YZF2R51z5AB6vd1qhyPytKMuvKYXXAFpgvF7YKJArwSP1T1kpJDIPSTpxktPqnvWGiJtCgDAJXLoToy0fjsq2yMDUJ5wyI1Mvc8XlWssTYeo5BjaGtUTk0gAlGe75w1/rE84LIUmYrPksd2IoWujeHbcdy8Yze2QDCxQ+CL2ssXJia89n0cwsLVvAGdLeFtNR7VYjEtMpsHnnu/7TL6vJtgbTCrj+Zj7BrnPcmj0ASiATolrHPpBP4NaewbQG0Zf8q77dCTzAJxvS5YysnqkiOvBHof391RzyXWf9w6HDqO3hYOB2YHrwY2193l6etGpJwBnK0ZeFN8ysFJrxlYpICwIE70YFboJrr23K69O6ri+XhTPahzcH8R7x1eHfe84dA2Id0v3KHxZpaiPcqFC8tgImUQoAOVzGYDvzpB5aPC8KAA2PEZClDdwE4x2voCBBp9gfUWI9DVozhTArZnjGLDwbawDfRApcA0oX6lS+HJGUw/FFUaElaBRA9WA1e/z8X+ReCa/vRxULA0XTAHUfosYNXNNkO8TBqoBGR+HVPiCiR91qMMffh51krGnB1ZGhZkgGXUFELXflfJl0iCJaZjoFRAA0wihMFNlp7MmXQGUbzKD6J7ucnfOWs8GVSCNEAoz3ve8uxSyI4DyNXr5IHiXNPR0AgqkEUJhx2Oogz4dAZSpEECyfo2+g4BJnkobhMKOMNRJo7YAyiQwGOmwo1NkPZe8AmmDUBgSltop1RZAmYEIBOd6Eph2og36eJogFIa82azaiNYSQK/ZxfRXbeLoYQsUSBOE3lRqbS7lWgIoE/9hnFeu5l6zgKnQJqQFQmFJmGpVwJYA1madbBVej1mmQFogbMfUqkdx3ny7ZT6BZtjKx26fHT9j/vbOMXN2PhcTigfG/eYbLjfys3XB47lzVKBNzfMdr6oBZbJnW+ETcRW+1ojZXhMKU95E4k3mrwIQc9DqjecmkXQ3IgWqE4qvSGwFgN6oF+bNK0JYtvPDW68y69bovIXNbrG9CRZ7UQveIIw12r7iGhDTOD2BUQzPNQbQ7cEq8Mzuw10NSAN8fiEwjeyTkwV63t9fUQMC0Vv8E7pOhwJpgs9TtImxOoCoHkfxNcwb0yG7WikKpA4+2CyMCWu+B+sAzlfMZtSABf+Eru1WII3weYqCMY+1mrx1AJdcd6vdkqt1vgKpha9WgEbW6gBi7JYC6HvY4nXa4fOkbWDNAxBt8ji6w9dbrLuaBgUyAR/KIawJc+JUD8DZRXMTDujAU1HE0iUr8Im8wpowJ9vVJpjNdbKji50KZAm+usI15jwAyXWn6id0wyoFMgkfFPaZq14DEimAVmH3f2MEwCwumHTEY85vghXALHrZ5jKx8Zijs8wXL5fcUzbbqrZlU4GhorPBMeUqidksopbKagXAnrNMCqDVTsqwccKeQ6w94Az72OqiCXsA0Og0C1a7KbvGCXsOusNrs1tELZnNCgh7DgZoKYA2eynLtoE9zLypAGbZx1aXDew5zGaN1UaqcZlVQNhzSGvAzDrY9oIJe3oNaLuXsmyfXgNm2bspKJtXA6bATjUxuwpIEzyX3eJpyaxWAOwN4zbMHCBMzbcA/3nCmGf+Rear8oqPOtR1vqTA5pffYfPdTfVDHTfyll5HMZI+CfbomwX33xilf03Sefea3/cPkjnZBj4/TYHw79vwCnSAJW/pBZAkwSD0H7kRnaomuBt8ol672rGVsnlLr5UGAzsG9mQwQqoAHJhYmnHkCgh7qasBI1dBExycAtUakOcHZ4HmnGsFmOcwHMuczLUIWvjBKUDmFAB0pgdngeacZwWEPWeIjQKYZwoGWHZhzzEFBXCAPsh31mDPWUf0NSaUO5NvJbT0SSsgzAl71S8jkNaCSTsg9/nVmKt+nIhZrwNzT0SyAlCNuerHiRztCScrv+bGNeb8JvgjlUQVSFQBMh5zHoATo+Z9TCZ3PlEDNLPcKiCsCXMiQPUakGgBg5eO5lYRLXiiCghrgHBBMq02wbLFfEhWuqgCsSvQwFodwGHHUQBjV14zEAUaWasDuGbMHMFcIWWVSBWIVQEw5rFWy6QOINrkRbxl8UGsmWviuVdAGBPWfCHqAHoHiN71T+haFYhFgSbGVgCITyUciCVTTVQVqCnQzNgKACfG6Biqxw9VLVUgDgWELWGsMe0VAHonmF5uDKDbqkBkCrRgaxWAVDSvgdRzkWWqCakCUECYEraaxVgF4AR5YwMPNgfUfVWgTwUO1thakcwqAOUst6gqV8TSHVUgpALtmGoJ4GTRvIURq6dD5qHBVYGWCghLwlSrky0BRHt93hC/1CqCHlMFQisAljymWkRsCaCEGy44uxGp0iKOHlIFAisgDAlL7SK0BXAN0VdseG+7iHpcFQiigDAkLLUL2xZAiTBqnBfbVZ3tEtTjqoCvgLAjDPn7rdYdASwW6Qt0ife1iqjHVIGuCoAdj6EOATsCKPFoyHkBJC93SCPRU8tL3e+RBwnjGx0kbJAwaUnPtzPutTAj7HTLpyuAeHb3Ge4M7u+WUFLnT5/4wnQCQs5JmKBL3tILqkv/4Xh/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){s.exports=a(63)},function(s,t,a){!function(t,a){s.exports=a()}(this,function(){return function(s){function t(l){if(a[l])return a[l].exports;var n=a[l]={exports:{},id:l,loaded:!1};return s[l].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var a={};return t.m=s,t.c=a,t.p="",t(0)}([function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){if(Array.isArray(s)){for(var t=0,a=Array(s.length);t1&&"\\"!==l[0].charAt(l[0].length-1)&&(n=l.shift(),s({name:"erase",actor:n}));var e=l.join(":").replace(/\\:/g,":"),i={name:"type",args:[e]};null!=n&&(i.actor=n),s(i)}p.default.isFunction(a)&&s({name:"callback",args:[a]}),p.default.isNumber(a)&&s(a>0?{name:"wait",args:[a]}:{name:"erase",args:[a]}),p.default.isObject(a)&&(p.default.isArray(a.args)||(a.args=[]),a.args.unshift(function(){y(a.name+":end",a),o()}),t.push(a))}for(var t=[],a=arguments.length,l=Array(a),n=0;n=S.scenario.length)return S.status="ready",y("scenario:end"),this;var s=S.scenario[++S.currentScene];if(0===S.currentScene&&y("scenario:start"),"publisher"===s.name){var a=e(s.args),l=a[0],i=a.slice(1);return y.apply(void 0,n(i)),l()}switch(s.actor&&t(s.actor),y(s.name+":start",s),s.name){case"type":h.apply(void 0,n(s.args));break;case"erase":C.apply(void 0,n(s.args));break;case"callback":g.apply(void 0,n(s.args));break;case"wait":b.apply(void 0,n(s.args));break;default:console.debug("No scene handler for "+s.name)}return this}function h(s,t){var l=a(),n=S.options.locale,e=S.options.minSpeed.type,i=S.options.maxSpeed.type,v=l.displayValue,_=-1,r=!1,c=null,o=null,p=u.default.map(t);return t=u.default.strip(t),function a(){var h=u.default.strip(l.displayValue.substr(v.length));if(h===t)return s();var C=t.substr(0,_+1),m=h!==C,j=l.shouldBeMistaken(h,t,c,o),g=r||!j;if(m&&g)r=!0,c=null,l.displayValue=v+u.default.inject(h.substr(0,h.length-1),p),_--,o=_;else{r=!1;var b=t.charAt(++_);j&&(b=d.default.randomCharNear(b,n),null==c&&(c=_)),l.displayValue=v+u.default.inject(h+b,p)}return setTimeout(a,l.getTypingSpeed(e,i))}(),this}function C(s,t){var l=a();if(null==l)return s();if(w.erase!==!0)return l.displayValue="",s();var n=S.options.minSpeed.erase,e=S.options.maxSpeed.erase,i=l.displayValue,v=u.default.map(i);i=u.default.strip(i);var _=i.length,r=void 0,c=0;return p.default.isNumber(t)&&(t>0?r=t:c=i.length+t),function t(){return _===c?s():(l.displayValue=u.default.inject(i.substr(0,--_),v),setTimeout(t,r||l.getTypingSpeed(n,e)))}(),this}function g(s,t){return t.call(this,s),this}function b(s,t){return setTimeout(s.bind(this),t),this}function f(s,t){return s.split(",").forEach(function(s){s=s.trim(),p.default.isArray(S.events[s])||(S.events[s]=[]),S.events[s].push(t)}),this}function y(){for(var s=arguments.length,t=Array(s),a=0;a0&&n.concat(S.events["*"]||[]).forEach(function(s){return s.apply(void 0,t)}),this}var w=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(w=c.default.merge({},j,w),p.default.isNumber(w.minSpeed)){var k=w,x=k.minSpeed;w.minSpeed={erase:x,type:x}}if(p.default.isNumber(w.maxSpeed)){var A=w,T=A.maxSpeed;w.maxSpeed={erase:T,type:T}}if("detect"===w.locale&&m){var E=m.languages;p.default.isArray(E)&&p.default.isString(E[0])&&(w.locale=E[0].substr(0,2))}d.default.supports(w.locale)||(w.locale=d.default.defaultLocale);var S={options:w,casting:{},status:"ready",onStage:null,currentScene:-1,scenario:[],events:{}};return t(null),Object.freeze(Object.defineProperties({addActor:s,getCurrentActor:a,addScene:l,play:i,replay:v,stop:r,on:f},{options:{get:function(){return S.options},configurable:!0,enumerable:!0},status:{get:function(){return S.status},configurable:!0,enumerable:!0}}))}Object.defineProperty(t,"__esModule",{value:!0});var v=a(1),_=l(v),r=a(3),c=l(r),o=a(2),p=l(o),h=a(4),d=l(h),C=a(6),u=l(C),m="undefined"!=typeof window&&window.navigator,j={autoplay:!0,erase:!0,minSpeed:{erase:80,type:80},maxSpeed:{erase:450,type:450},locale:"detect"};i.init=function(){var s=arguments.length<=0||void 0===arguments[0]?"actor":arguments[0],t=i();return t.addActor(s,{accuracy:1,speed:.8}),t},t.default=i,s.exports=t.default},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}Object.defineProperty(t,"__esModule",{value:!0});var n=a(2),e=l(n),i=a(3),v=l(i),_="undefined"!=typeof window&&window.document,r={speed:.6,accuracy:.6};t.default=function(s){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],a=arguments.length<=2||void 0===arguments[2]?null:arguments[2],l="",n=void 0;if(e.default.isNumber(t)&&(t={speed:t,accuracy:t}),t=v.default.merge({},r,t),_&&(null==a&&(a="#"+s),e.default.isString(a))){var i=a,c=_.querySelector(i);if(null==c)throw new Error("no matches for "+s+"'s selector: "+i);n=c,a=function(s){n.innerHTML=s}}return e.default.isFunction(a)||(a=console.log.bind(console)),Object.defineProperties({$element:n,getTypingSpeed:function(s,a){var l=v.default.randomFloat(t.speed,1);return v.default.getPercentageOf(a,s,l)},shouldBeMistaken:function(s,a){var l=arguments.length<=2||void 0===arguments[2]?null:arguments[2],n=arguments.length<=3||void 0===arguments[3]?null:arguments[3],i=10*t.accuracy;if(i>=8)return!1;if(s.length<=i)return!1;if(s.length===a.length)return!1;if(e.default.isNumber(l)){var _=s.length-l,r=i>=6?10-i:4;if(_>=r)return!1}if(e.default.isNumber(n)){var _=s.length-n,c=2*Math.max(i,2);if(_<=c)return!1}return v.default.randomFloat(0,.8)>t.accuracy}},{displayValue:{get:function(){return l},set:function(s){l=s,a(s)},configurable:!0,enumerable:!0},name:{get:function(){return s},configurable:!0,enumerable:!0}})},s.exports=t.default},function(s,t){"use strict";function a(s){return{}.toString.call(s)}Object.defineProperty(t,"__esModule",{value:!0}),t.default={isNumber:function(s){return"number"==typeof s},isString:function(s){return"[object String]"===a(s)},isObject:function(s){return"[object Object]"===a(s)},isArray:function(s){return"[object Array]"===a(s)},isFunction:function(s){return"function"==typeof s}},s.exports=t.default},function(s,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={merge:function(s){for(var t=[].slice.call(arguments,1),a=0,l=t.length;a0?n[_.default.random(0,n.length-1)]:this.randomChar(t);return e&&(o=o.toUpperCase()),o},randomChar:function(s){if(!this.supports(s))throw new Error('locale "'+s+'" is not supported');var t=c.default[s].list.join("");return t.charAt(_.default.random(0,t.length-1))}},s.exports=t.default},function(s,t){s.exports={en:["qwertyuiop","asdfghjkl","zxcvbnm"],fr:["azertyuiop","qsdfghjklm","wxcvbn"],da:["qwertyuiopå","asdfghjklæø","zxcvbnm"],de:["qwertzuiopü","asdfghjklöä","yxcvbnm"],pl:["qwertyuiopęó","asdfghjkląśł","zxcvbnmżźćń"],pt:["qwertyuiop","asdfghjklç","zxcvbnm"],ru:["йцукенгшщзх","фывапролджэ","ячсмитьбюъ"],es:["qwertyuiop","asdfghjklñ","zxcvbnm"]}},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){var t=s.match(/<([^\s>]+)/);return Boolean(t)&&i.default.indexOf(t[1].toLowerCase())>-1}Object.defineProperty(t,"__esModule",{value:!0});var e=a(7),i=l(e);t.default={strip:function(s){return s.replace(/(<([^>]+)>)/gi,"")},map:function(s){for(var t=/<[^>]+>/gi,a=[],l=[],e=void 0,i=void 0;e=t.exec(s);)i={tagName:e[0],position:e.index},"/"===i.tagName.charAt(1)?i.opener=l.pop():"/"===i.tagName.charAt(i.tagName.length-2)||n(i.tagName)||l.push(i),a.push(i);return a},inject:function(s,t){for(var a=0,l=void 0;a0&&l.position<=s.length?s=s.substr(0,l.position)+l.tagName+s.substr(l.position):l.opener&&l.opener.positionli{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}.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;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";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(88),e=l(n);t.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),n='

  • '+l+"

    ",e=t.length,i=2;i

  • '+l+"

    ")}n=n.replace(/#(\d+)/g,'#$1'),n=n.replace(/@(\w+)/g,'@$1'),this.$refs.timeline.innerHTML=n+"
    • ",s.$el.remove()}}},function(s,t,a){s.exports=a(89)},function(s,t,a){var l=a(13)(null,a(90),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changelog")]),a("h3",{attrs:{id:"2-0-0-alpha-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-alpha-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.0-alpha.2")]),a("p",[a("em",[s._v("2017-10-05")])]),a("ul",[a("li",[s._v("Updated the primary color of "),a("code",[s._v("theme-chalk")]),s._v(", #7351")]),a("li",[s._v("Fixed console error when using Dropdown, #7322")]),a("li",[s._v("Fixed console error when using Menu, #7321")]),a("li",[s._v("Added "),a("code",[s._v("popper-class")]),s._v(" attribute for ColorPicker, #7351")]),a("li",[s._v("Now Button's "),a("code",[s._v("disabled")]),s._v(" attribute works correctly, #7352")])]),a("h3",{attrs:{id:"2-0-0-alpha-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-alpha-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 2.0.0-alpha.1")]),a("p",[a("em",[s._v("2017-09-30")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features")]),a("ul",[a("li",[s._v("General\n"),a("ul",[a("li",[s._v("A new theme: "),a("code",[s._v("theme-chalk")])]),a("li",[s._v("Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),a("li",[s._v("Layout components: Container, Header, Aside, Main, Footer")])])]),a("li",[s._v("Button\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("round")]),s._v(" attribute. It's used for round-cornered Buttons #6643")])])]),a("li",[s._v("TimeSelect\n"),a("ul",[a("li",[s._v("Now can be navigated by "),a("code",[s._v("Up")]),s._v(" and "),a("code",[s._v("Down")]),s._v(", and hitting "),a("code",[s._v("Enter")]),s._v(" selects the time #6023")])])]),a("li",[s._v("TimePicker\n"),a("ul",[a("li",[s._v("Now can be navigated by arrow keys, and hitting "),a("code",[s._v("Enter")]),s._v(" selects the time #6050")]),a("li",[s._v("Added "),a("code",[s._v("start-placeholder")]),s._v(" and "),a("code",[s._v("end-placeholder")]),s._v(". They're placeholders for the two input boxes in range mode #7169")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("Now child nodes don't render before the first expand #6257")]),a("li",[s._v("Added "),a("code",[s._v("check-descendants")]),s._v(" attribute. It determines if child nodes are checked when checking their parent node\nin "),a("code",[s._v("lazy")]),s._v(" mode #6235")])])]),a("li",[s._v("Tag\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("size")]),s._v(" attribute #7203")])])]),a("li",[s._v("Datepicker\n"),a("ul",[a("li",[s._v("Now "),a("code",[s._v("timeFormat")]),s._v(" can format the TimePicker when type is set to "),a("code",[s._v("datetimerange")]),s._v(" #6052")]),a("li",[s._v("Added "),a("code",[s._v("start-placeholder")]),s._v(" and "),a("code",[s._v("end-placeholder")]),s._v(". They're placeholders for the two input boxes in range mode #7169")])])]),a("li",[s._v("MessageBox\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("closeOnHashChange")]),s._v(" attribute #6043")]),a("li",[s._v("Added "),a("code",[s._v("center")]),s._v(" attribute so that the content can be centered #7029")]),a("li",[s._v("Added "),a("code",[s._v("roundButton")]),s._v(" attribute to display round Buttons #7029")]),a("li",[s._v("Added "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" attribute. When set to "),a("code",[s._v("true")]),s._v(", "),a("code",[s._v("message")]),s._v(" will be parsed as HTML string"),a("sup",[s._v("*")]),s._v(" #6043")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("width")]),s._v("、"),a("code",[s._v("fullscreen")]),s._v("、"),a("code",[s._v("append-to-body")]),s._v(" attributes. Now Dialog can be nested")]),a("li",[s._v("Added "),a("code",[s._v("center")]),s._v(" attribute so that the content can be centered #7042")]),a("li",[s._v("Added "),a("code",[s._v("focus-after-closed")]),s._v("、"),a("code",[s._v("focus-after-open")]),s._v(" to improve accessibility #6511")])])]),a("li",[s._v("ColorPicker\n"),a("ul",[a("li",[s._v("Now you can type colors in the input box #6167")]),a("li",[s._v("Added "),a("code",[s._v("size")]),s._v(" and "),a("code",[s._v("disabled")]),s._v(" attributes #7026")])])]),a("li",[s._v("Message\n"),a("ul",[a("li",[s._v("Now color of the icons can be overridden by CSS #6207")]),a("li",[s._v("Added "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" attribute. When set to "),a("code",[s._v("true")]),s._v(", "),a("code",[s._v("message")]),s._v(" will be parsed as HTML string"),a("sup",[s._v("*")]),s._v(" #6207")]),a("li",[s._v("Added "),a("code",[s._v("center")]),s._v(" attribute so that the content can be centered #6875")])])]),a("li",[s._v("Notification\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("position")]),s._v(" attribute to configure where Notification pops up #6231")]),a("li",[s._v("Added "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" attribute. When set to "),a("code",[s._v("true")]),s._v(", "),a("code",[s._v("message")]),s._v(" will be parsed as HTML string"),a("sup",[s._v("*")]),s._v(" #6231")]),a("li",[s._v("Added "),a("code",[s._v("showClose")]),s._v(" attribute to hide the close button #6402")])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("show-score")]),s._v(" attribute to determine if current score is displayed #6295")])])]),a("li",[s._v("Tabs\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("tab-position")]),s._v(" attribute #6096")])])]),a("li",[s._v("Radio\n"),a("ul",[a("li",[s._v("Improved accessibility #6101")]),a("li",[s._v("Added "),a("code",[s._v("border")]),s._v(" and "),a("code",[s._v("size")]),s._v(" attributes #6690")])])]),a("li",[s._v("Checkbox\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("border")]),s._v(" and "),a("code",[s._v("size")]),s._v(" attributes #6690")])])]),a("li",[s._v("Alert\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("center")]),s._v(" attribute so that the content can be centered #6876")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("background-color")]),s._v(", "),a("code",[s._v("text-color")]),s._v(" and "),a("code",[s._v("active-text-color")]),s._v(" attributes #7064")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("inline-message")]),s._v(" attribute to determine if the validation message is displayed in inline style #7032")]),a("li",[s._v("Added "),a("code",[s._v("status-icon")]),s._v(" attribute to display a feedback icon when validated #7032")])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("suffix")]),s._v(" and "),a("code",[s._v("prefix")]),s._v(" named slots, "),a("code",[s._v("suffixIcon")]),s._v(" and "),a("code",[s._v("prefixIcon")]),s._v(" attributes to add contents inside the input box #7032")])])]),a("li",[s._v("Breadcrumb\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("separator-class")]),s._v(" attribute to support icons as item separators #7203")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("simple")]),s._v(" attribute to activate simple-styled Steps #7274")])])])]),a("h4",{attrs:{id:"bug-fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Bug fixes")]),a("ul",[a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("v-model")]),s._v(" returning the second day of the selected week in week mode #6038")]),a("li",[s._v("Fixed the first input being cleared in "),a("code",[s._v("daterange")]),s._v(" type #6021")])])]),a("li",[s._v("DateTimePicker\n"),a("ul",[a("li",[s._v("Fixed DateTimePicker and TimePicker affecting each other when picked #6090")]),a("li",[s._v("Fixed hour and second can be beyond limit when selecting time #6076")])])]),a("li",[s._v("TimePicker\n"),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("v-model")]),s._v(" not update correctly when blurred #6023")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Fixed texts having blurry edges when opening and closing nesting dropdowns #6088")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151")])])])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes")]),a("ul",[a("li",[s._v("General\n"),a("ul",[a("li",[s._v("Removed "),a("code",[s._v("theme-default")])]),a("li",[a("code",[s._v("change")]),s._v(" event of form components and "),a("code",[s._v("current-change")]),s._v(" event of Pagination now only trigger on user interaction")]),a("li",[a("code",[s._v("size")]),s._v(" attribute of Button and form components can no longer be set to "),a("code",[s._v("large")]),s._v(". Now they accept "),a("code",[s._v("medium")]),s._v(", "),a("code",[s._v("small")]),s._v(" and "),a("code",[s._v("mini")])]),a("li",[s._v("To facilitate the use of third-party icons, "),a("code",[s._v("icon")]),s._v(" attribute of Button and Steps, "),a("code",[s._v("prefix-icon")]),s._v(" and "),a("code",[s._v("suffix-icon")]),s._v(" attributes of Input now require a full class name")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Removed "),a("code",[s._v("size")]),s._v(" attribute. Now the size of Dialog can be configured by "),a("code",[s._v("width")]),s._v(" and "),a("code",[s._v("fullscreen")])]),a("li",[s._v("Now the visibility of Dialog cannot be controlled by "),a("code",[s._v("v-model")])])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[a("code",[s._v("text-template")]),s._v(" is renamed to "),a("code",[s._v("score-template")])])])]),a("li",[s._v("Dropdown\n"),a("ul",[a("li",[a("code",[s._v("menu-align")]),s._v(" is renamed to "),a("code",[s._v("placement")]),s._v(". Now it supports more positions")])])]),a("li",[s._v("Transfer\n"),a("ul",[a("li",[a("code",[s._v("footer-format")]),s._v(" is renamed to "),a("code",[s._v("format")])])])]),a("li",[s._v("Switch\n"),a("ul",[a("li",[a("code",[s._v("on-text")]),s._v(" and "),a("code",[s._v("off-text")]),s._v(" attributes now don't have default values")])])]),a("li",[s._v("Tag\n"),a("ul",[a("li",[a("code",[s._v("type")]),s._v(" attribute now accepts "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("info")]),s._v(", "),a("code",[s._v("warning")]),s._v(" and "),a("code",[s._v("danger")])]),a("li",[a("code",[s._v("close-transition")]),s._v(" is renamed to "),a("code",[s._v("disable-transitions")])])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Removed "),a("code",[s._v("theme")]),s._v(" attribute. The color of Menu can be configured using "),a("code",[s._v("background-color")]),s._v(", "),a("code",[s._v("text-color")]),s._v(" and "),a("code",[s._v("active-text-color")])])])]),a("li",[s._v("Input\n"),a("ul",[a("li",[s._v("Removed "),a("code",[s._v("icon")]),s._v(" attribute. Now the suffix icon can be configured using "),a("code",[s._v("suffix-icon")]),s._v(" attribute or "),a("code",[s._v("suffix")]),s._v(" named slot")]),a("li",[s._v("Removed "),a("code",[s._v("on-icon-click")]),s._v(" attribute and "),a("code",[s._v("click")]),s._v(" event. Now to add click handler on icons, please use named slots")])])]),a("li",[s._v("Autocomplete\n"),a("ul",[a("li",[s._v("Removed "),a("code",[s._v("custom-item")]),s._v(" attribute. Now the template of input suggestions can be customized using "),a("code",[s._v("scoped slot")])])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Removed support for customizing column template using "),a("code",[s._v("inline-template")])])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("Removed "),a("code",[s._v("center")]),s._v(" attribute")]),a("li",[s._v("Now the Steps will fill its parent container by default")])])])]),a("h2",{attrs:{id:""}},[a("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[s._v("¶")])]),a("p",[a("i",[a("sup",[s._v("*")]),s._v(" Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",[s._v("message")]),s._v(" to user-provided content.")])]),a("h3",{ -attrs:{id:"1-4-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.6")]),a("p",[a("em",[s._v("2017-09-27")])]),a("ul",[a("li",[s._v("Fixed Slider's button jumping to previous position when clicked, #7190")]),a("li",[s._v("Fixed Tooltip "),a("code",[s._v("disabled")]),s._v(" regression, #7198")]),a("li",[s._v("Fixed Cascader not correctly filter options when "),a("code",[s._v("props")]),s._v(" is set, #7225")]),a("li",[s._v("Fixed an error when range typed DatePicker has an initial value of "),a("code",[s._v("[]")]),s._v(", #7233")])]),a("h3",{attrs:{id:"1-4-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.5")]),a("p",[a("em",[s._v("2017-09-24")])]),a("ul",[a("li",[s._v("Rate's "),a("code",[s._v("colors")]),s._v(" attribute now supports dynamic updates, #6872 @lukaszb")]),a("li",[s._v("Fixed Tree not highlighting tree node whose value of "),a("code",[s._v("node-key")]),s._v(" is 0, #6917")]),a("li",[s._v("Fixed initially disabled Dropdown not showing menu when it's enabled, #6969")]),a("li",[s._v("Added "),a("code",[s._v("hide-after")]),s._v(" attribute for Tooltip, #6401 @ryatziv")]),a("li",[s._v("Fixed cancel button of TimePicker not cancel picked value when clicked, #7028")]),a("li",[s._v("Added "),a("code",[s._v("selectWhenUnmatched")]),s._v(" attribute for Autocomplete, #6428 @ryatziv")]),a("li",[s._v("Fixed when "),a("code",[s._v("beforeUpload")]),s._v(" of a file returns false, other files are aborted by Upload, #7077")]),a("li",[s._v("Fixed disabled dates of DatePicker in month view and year view not displayed correctly in the west hemisphere, #7114")]),a("li",[a("code",[s._v("default-value")]),s._v(" of DatePicker now supports daterange type, #7073 @wacky6")])]),a("h3",{attrs:{id:"1-4-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.4")]),a("p",[a("em",[s._v("2017-09-05")])]),a("ul",[a("li",[s._v("Fixed all months disabled in DatePicker month view when "),a("code",[s._v("disabledDate")]),s._v(" is set, #6768 @qingdengyue")]),a("li",[s._v("Added "),a("code",[s._v("debounce")]),s._v(" attribute for Slider, #6820 @langgo")]),a("li",[s._v("Fixed value of Pagination jumper can be bigger than the total page count, #6842 @huguangju")]),a("li",[s._v("Fixed TimePicker's focus slipping away when selecting hour to 23 with mouse scroll, #6719 @qingdengyue")])]),a("h3",{attrs:{id:"1-4-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.3")]),a("p",[a("em",[s._v("2017-08-25")])]),a("ul",[a("li",[s._v("Fixed style bug when Progress's "),a("code",[s._v("percentage")]),s._v(" is "),a("code",[s._v("0")]),s._v(", #6551 @Kingwl")]),a("li",[s._v("Fixed Carousel items flashing when switching, #6394")]),a("li",[s._v("Fixed disabled Button not prevent event propagation when clicked on its text area, #6421")]),a("li",[s._v("Fixed disabled dates calculation in DatePicker's month view, #6363")]),a("li",[s._v("Fixed key enter event being stopped propagation in Autocomplete, #6499 @leezng")]),a("li",[s._v("Fixed "),a("code",[s._v("amPm")]),s._v(" not supported in DatePicker i18n, #6574")]),a("li",[s._v("Fixed clicking or dragging error of Slider when it switches from invisible to visible, #6593")]),a("li",[s._v("Fixed Alert using small icons when its "),a("code",[s._v("description")]),s._v(" is passed via default slot, #6612 @leezng")])]),a("h3",{attrs:{id:"1-4-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.2")]),a("p",[a("em",[s._v("2017-08-09")])]),a("ul",[a("li",[s._v("Fixed Select marking option of "),a("code",[s._v("value")]),s._v(" equal to "),a("code",[s._v("0")]),s._v(" as selected when the initial value is null and bound to an object-typed value, #6143")]),a("li",[s._v("Fixed Step style issue when "),a("code",[s._v("status")]),s._v(" is "),a("code",[s._v("error")]),s._v(", #6155 @wacky6")]),a("li",[s._v("Fixed Cascader selecting parent item when moving mouse quickly after clicking a leaf item, #6199")]),a("li",[s._v("Fixed Menu not hiding submenus when collapsed, #6200")]),a("li",[s._v("Fixed status of the inner native input of Switch not syncing with the component, #6205 @wacky6")]),a("li",[s._v("Fixed wrong button positioning of Slider after window is resized, #6263")]),a("li",[s._v("Fixed Autocomplete not hiding dropdown menu on blur, #6256")]),a("li",[s._v("Fixed hitting enter on jumper of Pagination not trigger page change event in IE, #6306 @qingdengyue")]),a("li",[s._v("Fixed InputNumber style issue when its "),a("code",[s._v("size")]),s._v(" is "),a("code",[s._v("large")]),s._v(" or "),a("code",[s._v("small")]),s._v(", #6310 @JeremyWuuuuu")]),a("li",[s._v("Fixed i18n failure for some texts in DatePicker, #6328")]),a("li",[s._v("Fixed Slider value changing to minimum when its button is clicked, #6359")])]),a("h3",{attrs:{id:"1-4-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.1")]),a("p",[a("em",[s._v("2017-07-28")])]),a("ul",[a("li",[s._v("Fixed child nodes expanding when checking parent node in Tree, #6029")]),a("li",[s._v("Fixed checking behavior error of Tree, #6034")]),a("li",[s._v("Fixed FormItem not inheriting "),a("code",[s._v("label-width")]),s._v(" as a Form's direct child, #6044")]),a("li",[s._v("Fixed Menu incorrectly showing SubMenu in collapse mode, #6111")]),a("li",[s._v("Fixed render order error of "),a("code",[s._v("v-if")]),s._v(" controlled dynamic TabPanes, #6066")]),a("li",[s._v("Fixed Popover still popping up after mouse leaves within "),a("code",[s._v("open-delay")]),s._v(", #6058 (by @laobubu)")]),a("li",[s._v("Fixed delete buttons still rendered in file list of disabled Upload, #6091")]),a("li",[s._v("Fixed background color error on hover of striped Table, #6024 (by @xtongs)")])]),a("h3",{attrs:{id:"1-4-0-boron"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-0-boron","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.0 Boron")]),a("p",[a("em",[s._v("2017-07-21")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Message\n"),a("ul",[a("li",[a("code",[s._v("message")]),s._v(" attribute now supports VNode, #5463 (by @egyptik)")])])]),a("li",[s._v("ColorPicker\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("active-change")]),s._v(" event, #5775")])])]),a("li",[s._v("Popover\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("open-delay")]),s._v(" attribute, #5842 (by @kaungmyatlwin)")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("A third parameter "),a("code",[s._v("value")]),s._v(" is passed to "),a("code",[s._v("formatter")]),s._v(", #5709 (by @haledeng)")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute, #5937")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("collapse")]),s._v(" attribute, #5941")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("value-key")]),s._v(" attribute, #5897")])])])]),a("h4",{attrs:{id:"fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("i18n failure for some texts, #5485")]),a("li",[s._v("returning a non-zero millisecond value when initial value is empty, #5663")]),a("li",[a("code",[s._v("disabledDate")]),s._v(" affecting undesired date, #4946 (by @liyangworld)")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("style problems when a step is dynamically added or removed, #5456 (by @elfman)")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("highlight row misplaced when an expandable Table has fixed table columns, #5471 (by @elfman)")]),a("li",[a("code",[s._v("classList")]),s._v(" not supported in some browsers, #5613 (by @flynntsc)")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("single Select unable to scroll to the selected item when the dropdown menu pops up, #5564（by @wacky6）")])])]),a("li",[s._v("Radio\n"),a("ul",[a("li",[s._v("border radius lost in RadioGroups with only one Radio, #5646 (by @YYvanYang)")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("unable to reselect previously deleted file when "),a("code",[s._v("auto-upload")]),s._v(" is false, #5706")]),a("li",[s._v("delete button still visible and functioning when "),a("code",[s._v("disabled")]),s._v(", #5841")]),a("li",[s._v("compatibility issue with Vue 2.4 "),a("code",[s._v("key")]),s._v(", #5872")])])]),a("li",[s._v("MessageBox\n"),a("ul",[a("li",[s._v("clicking cancel buttons getting resolved when not invoked as a "),a("code",[s._v("confirm")]),s._v(" or "),a("code",[s._v("prompt")]),s._v(", #5658")])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[s._v("active icons not reflecting decimal part of initial value, #5785")])])]),a("li",[s._v("Pagination\n"),a("ul",[a("li",[s._v("compatibility issue of total page display with vue-i18n@6.x, #5796 (by @mario56)")]),a("li",[s._v("apostrophe incorrectly showing up when current page is one page less than total page, #5861 (by @openks)")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("style problems when bound to invisible elements, #5649 (by @xiongzixiao)")])])]),a("li",[s._v("Cascader\n"),a("ul",[a("li",[s._v("text in the input box not vertically aligned, #5819 (by @jianzhi92)")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[a("code",[s._v("setCheckedKeys")]),s._v(" and "),a("code",[s._v("setCheckedNodes")]),s._v(" in lazy mode, #5937")]),a("li",[s._v("loading all descendent nodes when a parent node is checked in lazy mode, #5963")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("label named slot not working when "),a("code",[s._v("label")]),s._v(" is not assigned on FormItem, #5921")])])]),a("li",[s._v("Tooltip\n"),a("ul",[a("li",[s._v("not working in Vue 2.4.x when the triggering element is a custom component, #5916")])])])]),a("h4",{attrs:{id:"breaking-changes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("when value is an object, "),a("code",[s._v("value-key")]),s._v(" is required as its unique identity key, #5897")])])])]),a("h3",{attrs:{id:"1-3-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.7")]),a("p",[a("em",[s._v("2017-06-18")])]),a("ul",[a("li",[s._v("Fixed Table with async data not showing summary row, #5318")]),a("li",[s._v("Fixed Pagination's jumper value not sync with current page, #5377")]),a("li",[s._v("Fixed DatePicker's shortcut panel overflow issue, #5297 (by @alashow)")]),a("li",[s._v("Fixed clicking Switch not responding when some text on the page is selected, #5411")]),a("li",[s._v("The red wildcard indicating required field of Form is now responsive, #5403")]),a("li",[s._v("Fixed initial-index of Carousel not working, #5334")]),a("li",[s._v("Fixed Popover enable to be focused when nested in a Dialog, #5336")])]),a("h3",{attrs:{id:"1-3-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.6")]),a("p",[a("em",[s._v("2017-06-09")])]),a("ul",[a("li",[s._v("Fixed inconsistency of ColorPicker's default value and panel value, #5183 (by @Kingwl)")]),a("li",[s._v("Fixed ColorPicker not able to change hue in the panel when its default value is white, #5184 (by @Kingwl)")]),a("li",[s._v("Fixed Select's dropdown taking multiple clicks to expand when nested in a Dialog after scrolling, #5226")]),a("li",[s._v("Added "),a("code",[s._v("props")]),s._v(" property for Autocomplete, #5282")]),a("li",[s._v("Fixed dropdown of DatePicker not hiding when Tab key is pressed after manual input, #5149 (by @ChuckFields)")])]),a("h3",{attrs:{id:"1-3-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.5")]),a("p",[a("em",[s._v("2017-06-03")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("default-first-option")]),s._v(" of Select not working in remote filtering, #5084")]),a("li",[s._v("Fixed InputNumber not aligning with other form components, #5127")]),a("li",[s._v("Fixed inline FormItem having no effect on mixed Input, #5151")]),a("li",[s._v("Fixed height of FormItem being different in Firefox from other browsers, #5152")]),a("li",[s._v("Fixed items with a "),a("code",[s._v("value")]),s._v(" of 0 in Cascader can not be expanded, #5172 (by @Kingwl)")]),a("li",[s._v("Fixed Autocomplete not triggering native "),a("code",[s._v("keydown")]),s._v(" and "),a("code",[s._v("keyup")]),s._v(" events, #5129")]),a("li",[s._v("Added "),a("code",[s._v("clear")]),s._v(" event for Select, #5112")]),a("li",[s._v("Fixed Cascader's dropdown menu not updating its position in some situations, #5064")]),a("li",[s._v("Better accessibility for Dialog and MessageBox, #4786")])]),a("h3",{attrs:{id:"1-3-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.4")]),a("p",[a("em",[s._v("2017-05-23")])]),a("ul",[a("li",[s._v("Fixed highlight and stripe effects of Table with expandable rows, #4871 (by @mu-yu)")]),a("li",[s._v("Added "),a("code",[s._v("default-first-option")]),s._v(" for Select, #4838 (by @wacky6)")]),a("li",[s._v('Fixed Select with no options not displaying "No data" text when '),a("code",[s._v("allow-create")]),s._v(" is true, #4977")])]),a("h3",{attrs:{id:"1-3-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.3")]),a("p",[a("em",[s._v("2017-05-14")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("visible-change")]),s._v(" event for Dropdown, #4818 (by @luciy)")]),a("li",[s._v("Added "),a("code",[s._v("tag")]),s._v(" attribute for Col and Row, #4799")]),a("li",[s._v("Fixed Cascader search functionality regression, #4812")]),a("li",[s._v("Fixed DatePicker triggering watch when "),a("code",[s._v("type")]),s._v(" is range, #4837 (by @wacky6)")]),a("li",[s._v("Fixed numbers in TimePicker not align vertically, #4847 (by @pengchongfu)")]),a("li",[s._v("Fixed Dialog not triggering "),a("code",[s._v("before-close")]),s._v(" hook when ESC is pressed, #4819 (by @patriciussanctus)")]),a("li",[s._v("Fixed multiple MessageBox not rendering content correctly when some of the "),a("code",[s._v("message")]),s._v(" is a VNode")]),a("li",[s._v("Fixed Checkbox not focused when navigating with tab")])]),a("h3",{attrs:{id:"1-3-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.2")]),a("p",[a("em",[s._v("2017-05-10")])]),a("ul",[a("li",[s._v("Fixed undefined custom component "),a("code",[s._v("el-collapse-transition")]),s._v(" error when importing some components on demand, #4728")]),a("li",[s._v("Fixed vertical alignment issue of Pagination in FireFox, #4756")]),a("li",[s._v("Fixed dropdown panel view not updating after binding value of DatePicker is programmatically changed when "),a("code",[s._v("type")]),s._v(" is week, #4739")]),a("li",[s._v("Fixed height calculation errors of Table with summary rows, #4736")]),a("li",[s._v("Added "),a("code",[s._v("before-filter")]),s._v(" attribute for Cascader, #4774")]),a("li",[s._v("Added "),a("code",[s._v("debounce")]),s._v(" attribute for InputNumber, #4712（by @pengchongfu）")])]),a("h3",{attrs:{id:"1-3-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.1")]),a("p",[a("em",[s._v("2017-05-06")])]),a("ul",[a("li",[s._v("Fixed Autocomplete clearing input box when typing Chinese, #4718")]),a("li",[s._v("Fixed async Table's summary row not scroll with Table, #4717")]),a("li",[s._v("Fixed Dialog not closing correctly after pressing ESC when "),a("code",[s._v("close-on-press-esc")]),s._v(" is true, #4706")]),a("li",[s._v("Fixed wrong parameter in "),a("code",[s._v("change")]),s._v(" event of Switch when "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(" are assigned, #4675")])]),a("h3",{attrs:{id:"1-3-0-beryllium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-0-beryllium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.0 Beryllium")]),a("p",[a("em",[s._v("2017-05-05")])]),a("h4",{attrs:{id:"new-features-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("New component: Transfer")]),a("li",[s._v("Now you can use our pre-defined transitions")]),a("li",[s._v("Vertical mode for Slider, can be activated by the "),a("code",[s._v("vertical")]),s._v(" attribute, #4410 (by @devange)")]),a("li",[s._v("Button style for CheckboxGroup, #3697 (by @mdartic)")]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("setCurrentRow")]),s._v(" method, #4390")]),a("li",[s._v("Added summary row, with three attributes: "),a("code",[s._v("show-summary")]),s._v(", "),a("code",[s._v("sum-text")]),s._v(" and "),a("code",[s._v("summary-method")]),s._v(", #4484")]),a("li",[s._v("Added "),a("code",[s._v("filter-placement")]),s._v(" attribute for TableColumn, #4491")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Added a "),a("code",[s._v("before-close")]),s._v(" hook, #4432")]),a("li",[s._v("Added "),a("code",[s._v("visible")]),s._v(" attribute, which supports the "),a("code",[s._v(".sync")]),s._v(" modifier, #4539")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute, #4473")]),a("li",[a("code",[s._v("on-change")]),s._v(" now also triggers when a file is added, #4447")]),a("li",[s._v("Added "),a("code",[s._v("abort")]),s._v(" method")])])]),a("li",[s._v("Switch now supports "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(", so that you can customize its values, #4403")]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("default-value")]),s._v(" attribute for initially displayed date in the dropdown, #4222 (by @wacky6)")]),a("li",[a("code",[s._v("type")]),s._v(" now supports dynamic updates, #4417 (by @coffeedeveloper)")]),a("li",[s._v("Added "),a("code",[s._v("label")]),s._v(" attribute for CarouselItem, #4317 (by @paul-blundell)")])])]),a("li",[a("code",[s._v("message")]),s._v(" of MessageBox now supports VNode, #4550")]),a("li",[a("code",[s._v("current-page")]),s._v(" of Pagination "),a("code",[s._v("current-page")]),s._v(" now supports "),a("code",[s._v(".sync")]),s._v(", #4539")]),a("li",[s._v("Added "),a("code",[s._v("label")]),s._v(" slot for Form, so you can customize label's content, #4634")])]),a("h4",{attrs:{id:"fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Compatibility issues of Select and Table with Vue 2.3.x, #4518")]),a("li",[a("code",[s._v("disabledDate")]),s._v(" of DatePicker having no effect on typed value in the input box, #4309")]),a("li",[s._v("An issue when the key of a Tree node is number 0, #4415")]),a("li",[s._v("TimePicker number not align when picked, #4425 (by @pengchongfu)")]),a("li",[s._v("Autocomplete frequently triggering searching method when typing Chinese, #4393 (by @qazbnm456)")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("not able to select the same file multiple times, #4461")]),a("li",[s._v("not displaying preview image when is "),a("code",[s._v("auto-upload")]),s._v(" false, #4572")]),a("li",[s._v("some style errors, #4643")])])]),a("li",[s._v("Style bug of RadioGroup when nested in a FormItem, #4336")]),a("li",[s._v("ColorPicker not clear the color panel when bound value is emptied, #4668 (by @pengchongfu)")]),a("li",[a("code",[s._v("show-overflow-tooltip")]),s._v(" of Table not working in Safari, #4157 (by @renxia)")])]),a("h4",{attrs:{id:"breaking-changes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Only compatible with Vue 2.3.0+")])]),a("h3",{attrs:{id:"1-2-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.9")]),a("p",[a("em",[s._v("2017-04-19")])]),a("ul",[a("li",[s._v("Fixed RadioButton not working properly when some texts on the page are selected, #4217")]),a("li",[s._v("Fixed the toggle-all checkbox of Tree not working in some browsers, #4107 (by @pengchongfu)")]),a("li",[s._v("Fixed Cascader clear button not working, #4167 (by @pengchongfu)")]),a("li",[s._v("Fixed router switching error when the page has a Table with Tooltips, #4085")]),a("li",[s._v("Fixed Upload not able to remove selected files, #4233")]),a("li",[s._v("Added "),a("code",[s._v("onClick")]),s._v(" attribute for Notification, #4221 (by @amouillard)")]),a("li",[s._v("Fixed binding value of DatePicker becoming undefined when cleared, #4186 (by @pengchongfu)")]),a("li",[s._v("Fixed style error of ColorPicker when nested in a FormItem, #4303")]),a("li",[s._v("Added "),a("code",[s._v("enterable")]),s._v(" attribute for Tooltip, #4210")])]),a("h3",{attrs:{id:"1-2-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.8")]),a("p",[a("em",[s._v("2017-04-07")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("resetFields")]),s._v(" of Form reassigning form items, #3840 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("max")]),s._v(" and "),a("code",[s._v("min")]),s._v(" attributes for CheckboxGroup, #3700 (by @mdartic)")]),a("li",[s._v("Fixed DatePicker adding one to picked month in some specific days, #3935")]),a("li",[s._v("Added "),a("code",[s._v("closeAll")]),s._v(" method for Message, #3966 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("format-tooltip")]),s._v(" attribute for Slider, #3657 (by @liyanlong)")]),a("li",[s._v("Fixed filter panel of Table being when nested in a Dialog, #4023 (by @liyanlong)")]),a("li",[s._v("Fixed single Select unable to create new items in Vue 2.2.x, #3984")]),a("li",[s._v("Fixed Row disappearing in all breakpoints if its "),a("code",[s._v("span")]),s._v(" is set to 0 in some breakpoints, #4053")])]),a("h3",{attrs:{id:"1-2-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.7")]),a("p",[a("em",[s._v("2017-03-29")])]),a("ul",[a("li",[s._v("Fixed Select not compatible with Vue 2.2.6, #3797")]),a("li",[s._v("Improve performance for rendering tooltip in Table, #3478")]),a("li",[s._v("Add "),a("code",[s._v("tooltip-effect")]),s._v(" property for Table")])]),a("h3",{attrs:{id:"1-2-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.6")]),a("p",[a("em",[s._v("2017-03-28")])]),a("ul",[a("li",[s._v("Fixed Switch compatible with SSR, #3752")]),a("li",[s._v("Fixed the time of TimePicker calculating incorrectly, #3479")]),a("li",[s._v("Fixed the week of DatePicker formatting incorrectly, #2774")]),a("li",[s._v("Fixed the week of DatePicker initializing incorrectly, #3058")]),a("li",[s._v("Fixed the events of Popover destroying incorrectly, #3555")]),a("li",[s._v("Fixed InputNumber setInterval, #3514 (by @pengchongfu)")]),a("li",[s._v("Fixed RadioButton css files, #3276")]),a("li",[s._v("Fixed hover style on striped Table, #3696 (by @nicoeg)")]),a("li",[s._v("Fixed Slider's button jumping left issue, #3664 (by @gabrielboliveira)")]),a("li",[s._v("Added "),a("code",[s._v("delete-tag")]),s._v(" event for Select, #3663 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("onPick")]),s._v(" option for DatePicker, #2921")]),a("li",[s._v("Added "),a("code",[s._v("status")]),s._v(" for Step, #3722")]),a("li",[s._v("Added full example for on-demand importing, #3302")])]),a("h3",{attrs:{id:"1-2-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.5")]),a("p",[a("em",[s._v("2017-03-19")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("show-tooltip")]),s._v(" property for Slider, #3430 (by @gabrielboliveira)")]),a("li",[s._v("Fixed Slider precision not updating when "),a("code",[s._v("step")]),s._v(" is updated, #3475 (by @gabrielboliveira)")]),a("li",[s._v("Fixed a bug that when the window is at the criticality of showing the scrollbar, the popup of Tooltip inside a Table will cause the Table to shake horizontally, #3549")]),a("li",[s._v("Fixed Table automatically shrinking vertically in some conditions, #3539")]),a("li",[s._v("Fixed popup components inside a Popover not hiding when blank area is clicked, #3451 (by @nicoeg)")]),a("li",[s._v("Now Col will hide itself if its "),a("code",[s._v("xs")]),s._v(", "),a("code",[s._v("sm")]),s._v(", "),a("code",[s._v("md")]),s._v(" or "),a("code",[s._v("lg")]),s._v(" is set to 0, #3564")])]),a("h3",{attrs:{id:"1-2-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.4")]),a("p",[a("em",[s._v("2017-03-09")])]),a("ul",[a("li",[s._v("Fixed Carousel not responding to dynamic data updates, #3159")]),a("li",[s._v("Fixed "),a("code",[s._v("cell-dblclick")]),s._v(" of Table not firing issue, #3305")]),a("li",[s._v("Fixed disabled Cascader not displaying initial value, #3297")]),a("li",[s._v("Fixed Slider not correctly displaying initial value when "),a("code",[s._v("show-input")]),s._v(" is true, #3281")]),a("li",[s._v("Fixed Tooltip error in server-side rendering, #3214")]),a("li",[s._v("Fixed "),a("code",[s._v("range-separator")]),s._v(" of DatePicker not working issue, #3378")]),a("li",[s._v("Added support for dynamically update loading text of Loading directive, #3345 (by @imyzf)")]),a("li",[s._v("Added "),a("code",[s._v("http-request")]),s._v(" attribute for Upload, #3387")]),a("li",[s._v("Added support for hiding col if its "),a("code",[s._v("span")]),s._v(" is 0, #3313")])]),a("h3",{attrs:{id:"1-2-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.3")]),a("p",[a("em",[s._v("2017-03-01")])]),a("ul",[a("li",[s._v("Fixed Tooltip, #3152")])]),a("h3",{attrs:{id:"1-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.2")]),a("p",[a("em",[s._v("2017-02-28")])]),a("ul",[a("li",[s._v("Fixed compatibility issues with Vue 2.2, #3002 #3067 #3097")]),a("li",[s._v("Fixed Cascader's dropdown hiding behind Dialog when nested in a Dialog, #3035")]),a("li",[s._v("Fixed incorrect parameter of "),a("code",[s._v("change")]),s._v(" event of Cascader, #3014")]),a("li",[s._v("Add "),a("code",[s._v("change")]),s._v(" event for ColorPicker, #3049 (by @nicoeg)")]),a("li",[s._v("Fixed "),a("code",[s._v("setCheckedKeys")]),s._v(" method of Tree not working on non-leaf nodes, #2967 (by @rainyLeo)")]),a("li",[s._v("Fixed Tooltip not compatible with "),a("code",[s._v("router-link")]),s._v(", #3143")])]),a("h3",{attrs:{id:"1-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.1")]),a("p",[a("em",[s._v("2017-02-23")])]),a("ul",[a("li",[s._v("Fixed SSR regression in version 1.2.0, #2982")]),a("li",[s._v("Fixed horizontal scroll buttons not showing in Tabs, #2974")]),a("li",[s._v("Fixed wrong calculation of height after the "),a("code",[s._v("height")]),s._v(" attribute is updated dynamically in Table, #2979")]),a("li",[s._v("Added "),a("code",[s._v("cell-dblclick")]),s._v(" and "),a("code",[s._v("header-dragend")]),s._v(" events for Table, #2983 #2988")]),a("li",[s._v("Fixed form items showing a left padding inside an inline Form with a specified "),a("code",[s._v("label-width")]),s._v(", #2990")]),a("li",[s._v("Fixed Cascader's dropdown misplaces in some conditions, #2992")])]),a("h3",{attrs:{id:"1-2-0-lithium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-0-lithium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.0 Lithium")]),a("p",[a("em",[s._v("2017-02-22")])]),a("h4",{attrs:{id:"new-features-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Cascader and ColorPicker")]),a("li",[s._v("New attributes "),a("code",[s._v("editable")]),s._v(" and "),a("code",[s._v("addable")]),s._v(", and new events "),a("code",[s._v("tab-add")]),s._v(" and "),a("code",[s._v("edit")]),s._v(" for Tabs")]),a("li",[s._v("Language config files in UMD format")]),a("li",[s._v("New events "),a("code",[s._v("node-expand")]),s._v(" and "),a("code",[s._v("node-collapse")]),s._v(" for Tree, #2507 (by @masterzhang)")]),a("li",[s._v("New attribute "),a("code",[s._v("indent")]),s._v(" for Tree, #2713")]),a("li",[s._v("Dialog's title now supports named slot, #2657")]),a("li",[s._v("New attribute "),a("code",[s._v("range")]),s._v(" for Slider, #2751")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Attribute "),a("code",[s._v("auto-upload")]),s._v(" that controls if files are uploaded immediately after selecting, and its default value is "),a("code",[s._v("true")])]),a("li",[s._v("Event "),a("code",[s._v("on-change")]),s._v(" that fires when file status changes")]),a("li",[s._v("Attribute "),a("code",[s._v("list-type")]),s._v(" that configures the appearance of file list")])])]),a("li",[s._v("Scroll bars in Autocomplete are made prettier")])]),a("h4",{attrs:{id:"fixes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Carousel not responding to contents' update, #2775")]),a("li",[s._v("Numbers in TimePicker not align in some conditions, #2948")]),a("li",[s._v("TimePicker only responding to odd clicks in some conditions, #2884 (by @k55k32)")]),a("li",[s._v("Tabs' display order error when tab-pane is dynamically changed, #2898")]),a("li",[s._v("Menu highlighting menu-item when "),a("code",[s._v("default-active")]),s._v(" is assigned to an non-existent item")]),a("li",[s._v("Collapse's style issue when nested")])]),a("h4",{attrs:{id:"breaking-changes-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Tooltip is refactored, no additional HTML tags will be rendered so that the structures of nested component stay unchanged, #2459")]),a("li",[s._v("The backdrop of Dialog now inserts to body element by default, #2556")]),a("li",[s._v("Tabs don't maintain tab instances internally any more, so they should be handled externally via events emitted by Tabs, #2567")]),a("li",[s._v("Upload is refactored\n"),a("ul",[a("li",[a("code",[s._v("default-file-list")]),s._v(" renamed to "),a("code",[s._v("file-list")]),s._v(", and "),a("code",[s._v("show-upload-list")]),s._v(" renamed to "),a("code",[s._v("show-file-list")])]),a("li",[a("code",[s._v("thumbnail-mode")]),s._v(" removed")])])])]),a("h3",{attrs:{id:"1-1-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.6")]),a("p",[a("em",[s._v("2017-01-23")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("customClass")]),s._v(" of MessageBox affecting follow-up instances, #2472")]),a("li",[s._v("Fixed style issue of Select after being activated when located in a non-default-activated tab pane inside Tabs, #2466")]),a("li",[s._v("Fixed style missing issue for some components when imported on demand")]),a("li",[s._v("Fixed disabled filterable multiple Select still showing dropdown when clicked on a certain area, #2540")]),a("li",[s._v("Restored returning to original sorting in sortable Table columns, #2491")]),a("li",[s._v("Added "),a("code",[s._v("reset.css")]),s._v(" in "),a("code",[s._v("theme-default")]),s._v(", #2378")]),a("li",[s._v("Added "),a("code",[s._v("range-separator")]),s._v(" attribute for DatePicker, #2579")]),a("li",[s._v("Published individual component packages: Table, DatePicker, Loading, Upload and Carousel")]),a("li",[s._v("Add Finnish (@groenroos)")])]),a("h3",{ -attrs:{id:"1-1-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.5")]),a("p",[a("em",[s._v("2017-01-17")])]),a("ul",[a("li",[s._v("Fixed Menu not activating corresponding menu item after router switching in router mode, #2451")]),a("li",[s._v("Fixed "),a("code",[s._v("value")]),s._v(" attribute of Collapse not supporting "),a("code",[s._v("Number")]),s._v(" typed value, #2455")])]),a("h3",{attrs:{id:"1-1-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.4")]),a("p",[a("em",[s._v("2017-01-16")])]),a("ul",[a("li",[s._v("Fixed Input Number triggering "),a("code",[s._v("change")]),s._v(" event when bound value is changed programmatically, #2329")]),a("li",[s._v("Fixed Menu not responding to "),a("code",[s._v("$router")]),s._v(" changing in router mode, #2391")]),a("li",[s._v("Fixed Menu and Tree expanding state malfunctioning when clicked multiple times quickly, #2354")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" event triggering mechanism of Input Number and Checkbox Group, now they do not fire when bound value is changed programmatically")]),a("li",[s._v("Added "),a("code",[s._v("on-icon-click")]),s._v(" attribute for Input, #2414")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute for Radio Group, #2411")]),a("li",[s._v("Added "),a("code",[s._v("accordion")]),s._v(" attribute for Tree, #2408")]),a("li",[s._v("Added "),a("code",[s._v("show-message")]),s._v(" attribute for Form, #2356")]),a("li",[s._v("Fixed sort clicking area of Table, updated default sorting related APIs, #2309 #2405 (by @njleonzhang)")]),a("li",[s._v("Fixed "),a("code",[s._v("firstDayOfWeek")]),s._v(" not working in ranged typed of DatePicker, #2353")]),a("li",[s._v("Fixed DatePicker displaying 1970 when initial value is null, #2388")]),a("li",[s._v("Fixed "),a("code",[s._v("filteredValue")]),s._v(" attribute for Table, #2348")]),a("li",[s._v("Fixed scrollable Table's style with empty data, #2396")]),a("li",[s._v("Added "),a("code",[s._v("beforeClose")]),s._v(" attribute for MessageBox, #2204")]),a("li",[s._v("Fixed filterable Select not showing dropdown when triangle icon is clicked, #2389")])]),a("p",[s._v("Breaking change")]),a("ul",[a("li",[s._v("The "),a("code",[s._v("default-sort-prop")]),s._v(" and "),a("code",[s._v("default-sort-order")]),s._v(" attributes added in 1.1.3 are now merged into an object-typed attribute")])]),a("h3",{attrs:{id:"1-1-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.3")]),a("p",[a("em",[s._v("2017-01-09")])]),a("ul",[a("li",[s._v("Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167")]),a("li",[s._v("Fixed DatePicker year calculating error when choosing the next year, #2152")]),a("li",[s._v("Added "),a("code",[s._v("default-sort-prop")]),s._v(" and "),a("code",[s._v("default-sort-order")]),s._v(" attributes for Table, #2182 (by @njleonzhang)")]),a("li",[s._v("Fixed filterable Select filtering other options with initial value, #2196")]),a("li",[s._v("Added custom i18n processing, making Element compatible with i18n plugins other than "),a("code",[s._v("vue-i18n")]),s._v(", #2129")]),a("li",[s._v("Added "),a("code",[s._v("resize")]),s._v(" attribute for Input, #2263 (by @Kingwl)")]),a("li",[s._v("Fixed Autocomplete not hiding dropdown when blurred, #2247")]),a("li",[s._v("Fixed style issues with nested Tabs, #2212 (by @Kingwl)")]),a("li",[s._v("Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192")])]),a("h3",{attrs:{id:"1-1-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),a("p",[a("em",[s._v("2016-12-30")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("sortable")]),s._v(" and "),a("code",[s._v("fixed")]),s._v(" attribute of Table not working in Vue 2.1.7+")]),a("li",[s._v("Fixed Input Number not resetting on blur when input with illegal values, #2098")]),a("li",[s._v("Removed "),a("code",[s._v("title")]),s._v(" scoped slot of Collapse, and added "),a("code",[s._v("title")]),s._v(" named slot, #2100")]),a("li",[s._v("Fixed range selection in TimePicker not working issue")]),a("li",[s._v("Fixed Tabs' active tab switching when a non-active tab is removed, #2106")]),a("li",[s._v("Fixed console error reporting when navigating Select with arrow keys, #2120")]),a("li",[s._v("Fixed incorrect validation timing of filterable Select in Form, #2120")])]),a("h3",{attrs:{id:"1-1-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),a("p",[a("em",[s._v("2016-12-29")])]),a("ul",[a("li",[s._v("Fixed compatibility issue with latest Vue due to compilation")])]),a("h3",{attrs:{id:"1-1-0-helium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-0-helium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0 Helium")]),a("p",[a("em",[s._v("2016-12-29")])]),a("h4",{attrs:{id:"new-features-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Carousel and Collapse")]),a("li",[s._v("SSR supported")]),a("li",[s._v("Scrollbars' style inside components is upgraded")]),a("li",[s._v("Table now supports custom templates via "),a("a",{attrs:{href:"http://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("scoped slots")]),s._v("; the good old "),a("code",[s._v("inline-template")]),s._v(" is still compatible, but it's no longer recommended and is likely to be removed in the future")]),a("li",[s._v("Table now supports expandable rows")]),a("li",[s._v("DatePicker now supports specifying the first day of week")]),a("li",[s._v("TimeSelect now supports "),a("code",[s._v("maxTime")])]),a("li",[s._v("Autocomplete now supports "),a("code",[s._v("popper-class")])]),a("li",[s._v("To customize template of Tab-Pane, now you can use the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("label")])])]),a("h4",{attrs:{id:"fixes-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[a("code",[s._v("change")]),s._v(" event of DatePicker incorrectly triggering multiple times, #2070")]),a("li",[s._v("Width shaking of tab-pane while initializing, #1883")])]),a("h4",{attrs:{id:"breaking-changes-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Only compatible with Vue 2.1.6 and beyond")]),a("li",[s._v("Parameters of Form validateField() methods are updated")]),a("li",[s._v("Alert's render-content attribute is removed, and now you can pass your custom template via default slot")]),a("li",[s._v("The box models of Input and Select are updated from "),a("code",[s._v("block")]),s._v(" to "),a("code",[s._v("inline-block")])]),a("li",[s._v("The box model of Tabs is updated from "),a("code",[s._v("inline-block")]),s._v(" to "),a("code",[s._v("block")]),s._v(", and Tab-Pane's "),a("code",[s._v("label-content")]),s._v(" attribute is removed")]),a("li",[s._v("The dropdown of Autocomplete now inserts directly to "),a("code",[s._v("")]),s._v(", not "),a("code",[s._v("")]),s._v(" any more")])]),a("h3",{attrs:{id:"1-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.9")]),a("p",[a("em",[s._v("2016-12-27")])]),a("ul",[a("li",[s._v("Fixed DatePicker incorrectly triggering input event, #1834")]),a("li",[s._v("Fixed Tree reporting "),a("code",[s._v("event is undefined")]),s._v(" error in Firefox, #1945")]),a("li",[s._v("Added "),a("code",[s._v("change")]),s._v(" event for DatePicker, whose parameter is the formatted value, #1841")]),a("li",[s._v("Added "),a("code",[s._v("header-align")]),s._v(" attribute for Table, #1424")]),a("li",[s._v("Fixed single select Table's highlight style not removing when data is removed, #1890")]),a("li",[s._v("Fixed filterable Select lagging issue with more options, #1933")]),a("li",[s._v("Fixed multiple disabled Select not disabling removing selected options issue, #2001")]),a("li",[s._v("Fixed Col style not working in "),a("code",[s._v("xs")]),s._v(", #2011")]),a("li",[s._v("Added "),a("code",[s._v("value")]),s._v(" attribute for Tab, #2008")]),a("li",[s._v("Fixed InputNumber "),a("code",[s._v("change")]),s._v(" event incorrectly firing multiple times in some conditions, #1999")]),a("li",[s._v("Added "),a("code",[s._v("clearable")]),s._v(" attribute for DatePicker, #1994")]),a("li",[s._v("Fixed Form always passing validation in async mode, #1936")])]),a("h3",{attrs:{id:"1-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.8")]),a("p",[a("em",[s._v("2016-12-20")])]),a("ul",[a("li",[s._v("Fixed nested Popup from event bubbling, #1677")]),a("li",[s._v("Fixed the issue that datetimerange-typed DatePicker can not select time, #1758")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" event not firing correctly of Slider, #1809")]),a("li",[s._v("Fixed Loading's spinner splitting while animating in some conditions, #1786")]),a("li",[s._v("Added "),a("code",[s._v("loading-text")]),s._v(", "),a("code",[s._v("no-data-text")]),s._v(", "),a("code",[s._v("no-match-text")]),s._v(" properties and "),a("code",[s._v("visible-change")]),s._v(" event for Select, #1849")]),a("li",[s._v("Added "),a("code",[s._v("popper-class")]),s._v(" property for DatePicker, Select and Tooltip, #1806")]),a("li",[s._v("Added "),a("code",[s._v("expand-on-click-node")]),s._v(", "),a("code",[s._v("current-node-key")]),s._v(" properties and "),a("code",[s._v("current-change")]),s._v(" event for Tree, #1805 #1807")]),a("li",[s._v("Added the third parameter "),a("code",[s._v("column")]),s._v(" for Table's "),a("code",[s._v("row-click")]),s._v(" event, #1808")]),a("li",[s._v("Fixed an error when pages with Checkbox switching routes due to "),a("code",[s._v("computed")]),s._v(" property being cached, #1860")]),a("li",[s._v("Added the tab instance as a parameter for TabPanel's "),a("code",[s._v("label-content")]),s._v(" render function, #1857")]),a("li",[s._v("Added infinite submenus support for NavMenu in vertical mode, #1851")]),a("li",[s._v("Updated Checkbox so that it works without a binding value, #1818")]),a("li",[s._v("Added "),a("code",[s._v("onProgress")]),s._v(" hook for Progress, #1782")]),a("li",[s._v("Fixed Tab not updating active bar with dynamic label, #1761")]),a("li",[s._v("Added "),a("code",[s._v("filter-change")]),s._v(" event for Table, and "),a("code",[s._v("column-key")]),s._v(" property for TableColumn, #1876")]),a("li",[s._v("Added "),a("code",[s._v("hide-on-click")]),s._v(" property for Dropdown, #1879")])]),a("h3",{attrs:{id:"1-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.7")]),a("p",[a("em",[s._v("2016-12-14")])]),a("ul",[a("li",[s._v("Fixed DatePicker dropdown appears when hovering on the clear button")]),a("li",[s._v("Fixed DatePicker displays a wrong date when its initial value is null")]),a("li",[s._v("Added "),a("code",[s._v("row-contextmenu")]),s._v(" event and "),a("code",[s._v("max-height")]),s._v(" attribute for Table, #1663 #1674")]),a("li",[s._v("Added "),a("code",[s._v("customClass")]),s._v(" attribute for MessageBox, #1707")]),a("li",[s._v("Added "),a("code",[s._v("iconClass")]),s._v(" and "),a("code",[s._v("customClass")]),s._v(" attributes for Message and Notification, #1671")]),a("li",[s._v("Added empty slot for Table, #1737")]),a("li",[s._v("Added old value as a second parameter in change event for InputNumber")])]),a("h3",{attrs:{id:"1-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.6")]),a("p",[a("em",[s._v("2016-12-09")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute for Tabs, #1620")]),a("li",[s._v("Added "),a("code",[s._v("size")]),s._v(" attribute for DatePicker input, #1440")]),a("li",[s._v("Fixed "),a("code",[s._v("datetimerange")]),s._v(" DatePicker's panel not showing correct date if initial value is present, #1129")]),a("li",[s._v("Fixed DatePicker display error when switching year, #1607")]),a("li",[s._v("Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604")]),a("li",[s._v("Fixed TimePicker not refreshing value after clicking the clear button, #1583")]),a("li",[s._v("Fixed remote filterable Select display error when its value is an object, #1593")]),a("li",[s._v("Fixed Select's clear button still working bug when it's "),a("code",[s._v("disabled")]),s._v(", #1619")]),a("li",[s._v("Fixed Switch's background color error when its "),a("code",[s._v("disabled")]),s._v(" attribute is dynamically changed, #1627")]),a("li",[s._v("Fixed some style bugs of Table")])]),a("h3",{attrs:{id:"1-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.5")]),a("p",[a("em",[s._v("2016-12-06")])]),a("ul",[a("li",[s._v("Fixed Select with async options and binding value displaying value instead of label, #1537")]),a("li",[s._v("Fixed Select reports an error when initial binding value is an empty object, #1533")]),a("li",[s._v("Fixed remote filtering Select not showing dropdown in some conditions, #1531")]),a("li",[s._v("Fixed Slider sometimes drifting a small distance after releasing dragging, #1546")]),a("li",[s._v("Fixed Steps style in IE9, #1543")]),a("li",[s._v("Added Upload generating URL for all file types, #1530")]),a("li",[s._v("Fixed TimeSelect style, removed flexbox, #1335")])]),a("h3",{attrs:{id:"1-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.4")]),a("p",[a("em",[s._v("2016-12-02")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("controls")]),s._v(" attribute for Input Number, #1473")]),a("li",[s._v("Fixed Checkbox Group and Radio Group async issue, #1511 #1514")]),a("li",[s._v("Added "),a("code",[s._v("offset")]),s._v(" attribute for Notification, #1419")]),a("li",[s._v("Fixed Slider's value not accurate issue when dragging rapidly, #1458")]),a("li",[s._v("Fixed Slider incorrectly showing multiple decimal digits issue, #1450")]),a("li",[s._v("Fixed Select's binding value and displayed value not in sync in some conditions")]),a("li",[s._v("Added "),a("code",[s._v("multiple-limit")]),s._v(" and "),a("code",[s._v("allow-create")]),s._v(" attributes for Select")]),a("li",[s._v("Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438")]),a("li",[s._v("Fixed Tree's view not updating issue after fetching child nodes' data, #1439")]),a("li",[s._v("Fixed some Table's style issues in windows system, #1464 #1507")]),a("li",[s._v("Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451")]),a("li",[s._v("Added "),a("code",[s._v("row-dblclick")]),s._v(" event for Table, #1362")])]),a("h3",{attrs:{id:"1-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),a("p",[a("em",[s._v("2016-11-28")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("currentPage")]),s._v(" of Pagination not working in some cases, #1336")]),a("li",[s._v("Fixed "),a("code",[s._v("month")]),s._v(" and "),a("code",[s._v("disabledDate")]),s._v(" DatePicker's view not refreshing issue when switching year, #1158")]),a("li",[s._v("Fixed "),a("code",[s._v("readonly")]),s._v(" DatePicker clear button not disabled issue, #1238")]),a("li",[s._v("Fixed Slider not working when binding value is "),a("code",[s._v("NaN")]),s._v(" or "),a("code",[s._v("step")]),s._v(" is smaller than 1, #1239 #1282")]),a("li",[s._v("Added multi-header for Table, #1312")]),a("li",[s._v("Added "),a("code",[s._v("rowStyle")]),s._v(" for Table, #1348")]),a("li",[s._v("Fixed some attributes of TableColumn can not dynamically assigned issue, #1314")]),a("li",[s._v("Added "),a("code",[s._v("filter-node-method")]),s._v(" attribute and "),a("code",[s._v("filter")]),s._v(" method for Tree, #1257")]),a("li",[s._v("Added "),a("code",[s._v("getCheckedKeys")]),s._v(" and "),a("code",[s._v("setCheckedKeys")]),s._v(" methods for Tree, #1254")]),a("li",[s._v("Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152")]),a("li",[s._v("Fixed Popper not triggering destroy issue when keep-alive, #1359")]),a("li",[s._v("Added object deep validation for Form, #1363")]),a("li",[s._v("Added "),a("code",[s._v("append")]),s._v(" and "),a("code",[s._v("prepend")]),s._v(" for Autocomplete, #1369")]),a("li",[s._v("Added dynamic "),a("code",[s._v("pageSizes")]),s._v(" support for Pagination, #1372")]),a("li",[s._v("Added custom style API for checked buttons in Radio Button, #1380")]),a("li",[s._v("Added assigning title via slot for Menu Group, #1382")]),a("li",[s._v("Fixed DatePicker year switching bug, #1385")]),a("li",[s._v("Added uploaded file list API for Upload, #1393")]),a("li",[s._v("Added multi-type support for "),a("code",[s._v("label")]),s._v(" attribute of Checkbox, #1400")]),a("li",[s._v("Added "),a("code",[s._v("setChecked")]),s._v(" method for Tree, #1422")])]),a("h3",{attrs:{id:"1-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),a("p",[a("em",[s._v("2016-11-18")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("context")]),s._v(" for Table to specify which context to access inside of table columns, #1161")]),a("li",[s._v("Added multiple languages")]),a("li",[s._v("Fixed language's dynamic switching issue, #1160")]),a("li",[s._v("Added "),a("code",[s._v("render-content")]),s._v(" for Alert, #568")]),a("li",[s._v("Added styles for focused Button, #982")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" triggering timing in Switch, #1162")]),a("li",[s._v("Fixed TimeSelect being disabled when start time is set to "),a("code",[s._v("00:00")]),s._v(", #676")]),a("li",[s._v("Added "),a("code",[s._v("show-header")]),s._v(" attribute and "),a("code",[s._v("header-click")]),s._v(" method for Table, #1195")]),a("li",[s._v("Improved "),a("code",[s._v("height")]),s._v(" attribute for Table when set to a string, #1195")]),a("li",[s._v("Fixed "),a("code",[s._v("selection-change")]),s._v(" of Table not triggering in some cases, #1198")]),a("li",[s._v("Fixed Table's fixed columns not disappear when "),a("code",[s._v("fixed")]),s._v(" attribute is dynamically changed, #1182")])]),a("h3",{attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("Fixed Pagination improperly triggering multiple "),a("code",[s._v("current-change")]),s._v(" events")]),a("li",[s._v("Fixed Switch style when nested in a Form, #967")]),a("li",[s._v("Fixed Loading locks scroll of "),a("code",[s._v("body")]),s._v(" in specific scenarios, #968")]),a("li",[a("code",[s._v("span")]),s._v(" of Col is no longer a required attribute, and its default value is "),a("code",[s._v("24")]),s._v(" if omitted")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" and "),a("code",[s._v("editable")]),s._v(" attribute for DatePicker, #976")]),a("li",[s._v("Fixed DatePicker readonly with native behavior, #976")]),a("li",[s._v("Added "),a("code",[s._v("close")]),s._v(" method for Message and Notification to manually close an instance")]),a("li",[s._v("Added clear value feature for DatePicker, #759")]),a("li",[s._v("Fixed Form reports an error when resetting a Date typed field, #937")]),a("li",[s._v("Fixed Table render error using vue-loader 9.9.0")]),a("li",[s._v("Added "),a("code",[s._v("align-center")]),s._v(" attribute for Step, #994")]),a("li",[s._v("Fixed Upload missing Progress component, #1013")]),a("li",[s._v("Layout now supports responsive layout")]),a("li",[s._v("Added "),a("code",[s._v("show-close")]),s._v(" for Dialog")]),a("li",[s._v("Fixed an error when "),a("code",[s._v("vue-i18n")]),s._v(" is imported but not configured, #973")]),a("li",[s._v("Fixed DatePicker not refresh view with an initial value, #1050")]),a("li",[s._v("Fixed DiatePicker not refresh year when switched in month picker, #1070")]),a("li",[s._v("Added $loading service")]),a("li",[s._v("Added "),a("code",[s._v("manual")]),s._v(" trigger in Popover")]),a("li",[s._v("Added props: "),a("code",[s._v("nodeKey")]),s._v(", "),a("code",[s._v("emptyText")]),s._v(", "),a("code",[s._v("checkStrictly")]),s._v(", "),a("code",[s._v("defaultExpandAll")]),s._v(", "),a("code",[s._v("autoExpandParent")]),s._v(", "),a("code",[s._v("defaultCheckedKeys")]),s._v(", "),a("code",[s._v("defaultExpandedKeys")]),s._v(" and method: "),a("code",[s._v("setCheckedNodes")]),s._v(" for Tree")])]),a("h3",{attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("ul",[a("li",[s._v("Element 1.0.0 released.")])])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n Changelog\n ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(93)}var n=a(13)(a(95),a(96),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(94);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("1449c0e3",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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)}.page-component .page-component-up i{color:#409eff;display:block;line-height:40px;text-align:center;font-size:12px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{transform:translateY(-30px);opacity:0}.page-component.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}}",""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(42),e=l(n),i=a(24),v=l(i),_=a(43),r=l(_);t.default={data:function(){return{lang:this.$route.meta.lang,navsData:v.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:{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,e.default.$emit("toggleHeader",this.showHeader)),0===s&&(this.showHeader=!0,e.default.$emit("toggleHeader",this.showHeader)),this.navFaded||e.default.$emit("fadeNav"),this.scrollTop=s}},created:function(){var s=this;e.default.$on("navFade",function(t){s.navFaded=t})},mounted:function(){this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=(0,r.default)(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler)},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)}}},function(s,t){s.exports={render: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)])},staticRenderFns:[]}},function(s,t,a){function l(s){a(98)}var n=a(13)(null,a(100),l,"data-v-f413aa2a",null);s.exports=n.exports},function(s,t,a){var l=a(99);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("b501f028",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".cards[data-v-f413aa2a]{margin:30px 0 70px}.card[data-v-f413aa2a]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-f413aa2a]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-f413aa2a]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-f413aa2a]{font-size:14px;color:#99a9bf}",""])},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Design Disciplines")]),l("el-row",{staticClass:"cards",attrs:{gutter:14}},[l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(49),alt:"Consistency"}}),l("h4",[s._v("Consistency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(50),alt:"Feedback"}}),l("h4",[s._v("Feedback")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(51),alt:"Efficiency"}}),l("h4",[s._v("Efficiency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(52),alt:"Controllability"}}),l("h4",[s._v("Controllability")]),l("span")])])],1),l("h3",[s._v("Consistency")]),s._m(0),l("h3",[s._v("Feedback")]),s._m(1),l("h3",[s._v("Efficiency")]),s._m(2),l("h3",[s._v("Controllability")]),s._m(3)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Consistent with real life: ")]),s._v("in line with the process and logic of real life, and comply with languages and habits that the users are used to.")]),a("li",[a("strong",[s._v("Consistent within interface: ")]),s._v("all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Operation feedback: ")]),s._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),a("li",[a("strong",[s._v("Visual feedback: ")]),s._v("reflect current state by updating or rearranging elements of the page.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Simplify the process: ")]),s._v("keep operating process simple and intuitive.")]),a("li",[a("strong",[s._v("Definite and clear: ")]),s._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),a("li",[a("strong",[s._v("Easy to identify: ")]),s._v("the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Decision making: ")]),s._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),a("li",[a("strong",[s._v("Controlled consequences: ")]),s._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}]}},function(s,t,a){function l(s){a(102)}var n=a(13)(a(104),a(105),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(103);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("74bf6d0c",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.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){"use strict";t.__esModule=!0,t.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(107)}var n=a(13)(a(109),a(110),l,"data-v-05bad635",null);s.exports=n.exports},function(s,t,a){var l=a(108);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("8d2aac02",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.cards .container[data-v-05bad635]:after,.cards .container[data-v-05bad635]:before{display:table;content:""}.cards .container[data-v-05bad635]:after{clear:both}.actor[data-v-05bad635]{min-height:65px}.actor[data-v-05bad635]:after{content:"";width:6px;height:50px;vertical-align:-8px;margin-left:5px;background-color:#fff;display:inline-block;animation:blink .4s infinite alternate}.banner[data-v-05bad635]{position:relative;height:420px;color:#fff;margin-bottom:130px}.banner .container[data-v-05bad635]{position:relative}.banner img[data-v-05bad635]{position:absolute;top:15px;right:-10px}.banner-sky[data-v-05bad635]{position:absolute;top:-150px;bottom:-15px;width:100%;margin-top:-140px;transform:skewY(-5deg);transform-origin:center;background-image:linear-gradient(180deg,#0d1a44 13%,#3c4f91 56%,#5fc1e4)}img.banner-stars[data-v-05bad635]{top:-10px;left:50%;transform:translateX(-50%)}.banner-desc[data-v-05bad635]{padding-top:110px;padding-left:30px;font-size:42px;position:relative;z-index:10}.banner-desc h2[data-v-05bad635]{font-size:50px;margin:0;color:#fff}.banner-desc p[data-v-05bad635]{font-size:14px;opacity:.8;width:420px;line-height:1.6;padding-left:3px}.cards[data-v-05bad635]{margin:0 auto 110px;width:1140px}.cards .container[data-v-05bad635]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-05bad635]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-05bad635]{width:160px;height:120px}.card[data-v-05bad635]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-05bad635]{margin:66px auto 60px}.card h3[data-v-05bad635]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-05bad635]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:1.6}.card a[data-v-05bad635]{height:53px;line-height:52px;font-size:14px;color:#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-05bad635]:hover{color:#fff;background:#409eff}.card[data-v-05bad635]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@keyframes blink{0%{opacity:0}to{opacity:1}}@media (max-width:1140px){.cards .container[data-v-05bad635],.cards[data-v-05bad635]{width:100%}.banner .container[data-v-05bad635]{width:100%;box-sizing:border-box}.banner img[data-v-05bad635]{right:0}}@media (max-width:1000px){.banner .container img[data-v-05bad635]{display:none}}@media (max-width:768px){.cards li[data-v-05bad635]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-05bad635]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-05bad635],.banner-stars[data-v-05bad635]{display:none}.banner-desc h2[data-v-05bad635]{font-size:32px}.banner-desc p[data-v-05bad635]{width:auto}}',""]); -},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(62),e=l(n);t.default={mounted:function(){function s(t){t.addScene("product designers",1800,-17,800).addScene("UI designers",1800,-12,800).addScene("UX designers",1800,-12,800).addScene("product managers",1800,-16,800).addScene("FE developers",1800,-13,800).addScene(function(a){s(t),a()})}var t=(0,e.default)({maxSpeed:100});t.on("type:start, erase:start",function(){t.getCurrentActor().$element.classList.add("typing")}).on("type:end, erase:end",function(){t.getCurrentActor().$element.classList.remove("typing")}),t.addActor("line2",{speed:1,accuracy:1}).addScene(2600).addScene("line2:For ",500).addScene(function(a){s(t),a()})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(65),alt:""}}),l("h3",[s._v("Guide")]),l("p",[s._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[s._v("View Detail\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(66),alt:""}}),l("h3",[s._v("Component")]),l("p",[s._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[s._v("View Detail\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(67),alt:""}}),l("h3",[s._v("Resource")]),l("p",[s._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[s._v("View Detail\n ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(68),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("A Desktop UI Library")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])]),l("img",{attrs:{src:a(69),alt:"Element"}})])])}]}},function(s,t,a){function l(s){a(112)}var n=a(13)(a(114),a(115),l,"data-v-d0518674",null);s.exports=n.exports},function(s,t,a){var l=a(113);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("23d8d63a",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,"h3[data-v-d0518674]{margin-bottom:15px}.block[data-v-d0518674]{margin-bottom:55px}p[data-v-d0518674]{margin:0 0 15px}.nav-demos p[data-v-d0518674]{margin-bottom:50px}.nav-demos h5[data-v-d0518674]{margin:0}.nav-demos img[data-v-d0518674]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-d0518674]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-d0518674]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-d0518674]{display:block;width:100%}.mask[data-v-d0518674]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-d0518674],.zoom-leave-active[data-v-d0518674]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-d0518674],.zoom-leave-active[data-v-d0518674]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-d0518674],.fade-leave-active[data-v-d0518674]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-d0518674],.fade-leave-active[data-v-d0518674]{opacity:0}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(s){document.body.style.overflow=s?"hidden":""}},methods:{enlarge:function(s,t){var a=t.target,l={},n=document;l.left=(n.body.scrollWidth-s)/2,l.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=s+"px",this.showDialog=!0}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Navigation")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("Side Navigation")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._v("Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:a(75),alt:"Level 1 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 1 categories")]),l("p",[s._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),l("img",{attrs:{src:a(76),alt:"Level 2 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 2 categories")]),l("p",[s._v("Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.")]),l("img",{attrs:{src:a(77),alt:"Level 3 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 3 categories")]),l("p",[s._v("Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.")])])],1)],1),l("div",{staticClass:"block"},[l("h3",[s._v("Top Navigation")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._v("Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:a(78),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),l("p",[s._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._v("Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("Choose the right navigation")]),a("p",[s._v("An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation")])])}]}},function(s,t,a){function l(s){a(117)}var n=a(13)(null,a(119),l,"data-v-bc99180a",null);s.exports=n.exports},function(s,t,a){var l=a(118);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("e1a146d4",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.cards .container[data-v-bc99180a]:after,.cards .container[data-v-bc99180a]:before{display:table;content:""}.cards .container[data-v-bc99180a]:after{clear:both}.page-resource[data-v-bc99180a]{padding-top:55px;box-sizing:border-box}.cards[data-v-bc99180a]{margin:35px auto 110px}.cards .container[data-v-bc99180a]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-bc99180a]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-bc99180a]{font-size:28px;margin:0}p[data-v-bc99180a]{font-size:14px;color:#5e6d82}.card[data-v-bc99180a]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-bc99180a]{margin:75px auto 35px;height:87px}.card h3[data-v-bc99180a]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-bc99180a]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.6}.card a[data-v-bc99180a]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#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-bc99180a]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-bc99180a]{height:auto;padding-bottom:20px}.cards h3[data-v-bc99180a]{height:auto}}',""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-resource"},[a("h2",[s._v("Resource")]),a("p",[s._v("Under construction.")])])}]}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){s.exports=a.p+"static/hamburger.50e4091.png"},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t){"use strict";t.__esModule=!0;var a=t.hasClass=function(s,t){return s.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))},l=t.addClass=function(s,t){a(s,t)||(s.className+=" "+t)},n=t.removeClass=function(s,t){if(a(s,t)){var l=new RegExp("(\\s|^)"+t+"(\\s|$)");s.className=s.className.replace(l," ")}};t.toggleClass=function(s,t){a(s,t)?n(s,t):l(s,t)}},,,,,,,,,,,,function(s,t){s.exports=["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning_default","delete2","upload2","view","circle-check-plain","circle-cross-plain","information-plain","warning-plain","info","error","success","warning","sort-down","sort-up"]},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/alert.md":398,"./en-US/badge.md":404,"./en-US/breadcrumb.md":409,"./en-US/button.md":412,"./en-US/card.md":417,"./en-US/carousel.md":423,"./en-US/cascader.md":429,"./en-US/checkbox.md":435,"./en-US/collapse.md":439,"./en-US/color-picker.md":445,"./en-US/color.md":451,"./en-US/container.md":456,"./en-US/custom-theme.md":462,"./en-US/date-picker.md":465,"./en-US/datetime-picker.md":471,"./en-US/dialog.md":477,"./en-US/dropdown.md":483,"./en-US/form.md":489,"./en-US/home.md":495,"./en-US/i18n.md":499,"./en-US/icon.md":502,"./en-US/input-number.md":508,"./en-US/input.md":514,"./en-US/installation.md":520,"./en-US/layout.md":523,"./en-US/loading.md":528,"./en-US/menu.md":534,"./en-US/message-box.md":540,"./en-US/message.md":544,"./en-US/notification.md":548,"./en-US/pagination.md":552,"./en-US/popover.md":558,"./en-US/progress.md":564,"./en-US/quickstart.md":567,"./en-US/radio.md":570,"./en-US/rate.md":574,"./en-US/select.md":580,"./en-US/slider.md":586,"./en-US/steps.md":590,"./en-US/switch.md":594,"./en-US/table.md":600,"./en-US/tabs.md":606,"./en-US/tag.md":610,"./en-US/time-picker.md":616,"./en-US/tooltip.md":622,"./en-US/transfer.md":628,"./en-US/transition.md":634,"./en-US/tree.md":640,"./en-US/typography.md":646,"./en-US/upload.md":651};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=397},function(s,t,a){s.exports=a(399)},function(s,t,a){function l(s){a(400)}var n=a(13)(a(402),a(403),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(401);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("d74ba098",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-alert .el-alert{margin:20px 0 0}.demo-box.demo-alert .el-alert:first-child{margin:0}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays important alert messages.")]),s._m(1),a("p",[s._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success"}}),a("el-alert",{attrs:{title:"info alert",type:"info"}}),a("el-alert",{attrs:{title:"warning alert",type:"warning"}}),a("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),a("p",[s._v("Alert provides 4 types of themes defined by "),a("code",[s._v("type")]),s._v(", whose default value is "),a("code",[s._v("info")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Customize the close button as texts or other symbols.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n hello() {\n alert('Hello World!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),a("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),a("code",[s._v("closable")]),s._v(" attribute decides if the component can be closed or not. It accepts "),a("code",[s._v("boolean")]),s._v(", and the default is "),a("code",[s._v("true")]),s._v(". You can set "),a("code",[s._v("close-text")]),s._v(" attribute to replace the default cross symbol as the close button. Be careful that "),a("code",[s._v("close-text")]),s._v(" must be a string. "),a("code",[s._v("close")]),s._v(" event fires when the component is closed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"unclosable alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"customized close-text"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("close-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Gotcha"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"alert with callback"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hello"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n hello() {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'Hello World!'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displaying an icon improves readability.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2),a("p",[s._v("Setting the "),a("code",[s._v("show-icon")]),s._v(" attribute displays an icon that corresponds with the current Alert type.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("center")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("center")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("center")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("center")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Description includes a message with more detailed information.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2),a("p",[s._v("Besides the required "),a("code",[s._v("title")]),s._v(" attribute, you can add a "),a("code",[s._v("description")]),s._v(" attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"with description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"This is a description."')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2),a("p",[s._v("At last, this is an example with both icon and description.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr" -},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable-close-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable close button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"centered-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use the "),a("code",[s._v("center")]),s._v(" attribute to center the text.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon-and-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon and description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("title "),a("strong",[s._v("REQUIRED")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("component type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("descriptive text. Can also be passed with the default slot")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("if closable or not")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to center the text")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("customized close button text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("if a type icon is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("fires when alert is closed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(405)},function(s,t,a){function l(s){a(406)}var n=a(13)(null,a(408),l,"data-v-398e2279",null);s.exports=n.exports},function(s,t,a){var l=a(407);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("8092a762",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.clearfix[data-v-398e2279]:after,.clearfix[data-v-398e2279]:before{display:table;content:""}.clearfix[data-v-398e2279]:after{clear:both}.share-button[data-v-398e2279]{width:36px;padding:10px}.mark[data-v-398e2279]{margin-top:8px;line-height:1;float:right}.item[data-v-398e2279]{margin-right:40px}',""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A number or status mark on buttons and icons.")]),s._m(1),a("p",[s._v("Displays the amount of new messages.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n \n Click Me\n \n \n \n comments\n \n \n \n replies\n \n \n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n comments\n "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n replies\n "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("The amount is defined with "),a("code",[s._v("value")]),s._v(" which accepts "),a("code",[s._v("Number")]),s._v(" or "),a("code",[s._v("String")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n comments\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n replies\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize the max value.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("The max value is defined by property "),a("code",[s._v("max")]),s._v(" which is a "),a("code",[s._v("Number")]),s._v(". Note that it only works when "),a("code",[s._v("value")]),s._v(" is also a "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"99"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displays text content other than numbers.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("When "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("String")]),s._v(", it can display customized text.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"new"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hot"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Use a red dot to mark content that needs to be noticed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'query\n\n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("query")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("is-dot")]),s._v(". It is a "),a("code",[s._v("Boolean")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("query"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share-button"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"max-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" Max value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"little-red-dot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Little red dot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("display value")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value, shows '{max}+' when exceeded. Only works if "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("Number")])]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("if a little dot is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("hidden badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(410)},function(s,t,a){var l=a(13)(null,a(411),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays the location of the current page, making it easier to browser back.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n homepage\n promotion management\n promotion list\n promotion detail\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),a("el-breadcrumb-item",[s._v("promotion management")]),a("el-breadcrumb-item",[s._v("promotion list")]),a("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),a("p",[s._v("In "),a("code",[s._v("el-breadcrumb")]),s._v(", each "),a("code",[s._v("el-breadcrumb-item")]),s._v(" is a tag that stands for every level starting from homepage. This component has a "),a("code",[s._v("String")]),s._v(" attribute "),a("code",[s._v("separator")]),s._v(", and it determines the separator. Its default value is '/'.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"/"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":to")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n homepage\n promotion management\n promotion list\n promotion detail\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),a("el-breadcrumb-item",[s._v("promotion management")]),a("el-breadcrumb-item",[s._v("promotion list")]),a("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("separator-class")]),s._v(" to use "),a("code",[s._v("iconfont")]),s._v(" as the separator，it will cover "),a("code",[s._v("separator")])]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(" "),a("span",{ -staticClass:"hljs-attr"},[s._v("separator-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-arrow-right"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":to")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icon-separator"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-separator","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon separator")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("separator character")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("/")])]),a("tr",[a("td",[s._v("separator-class")]),a("td",[s._v("iconfont-separator's 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("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("target route of the link, same as "),a("code",[s._v("to")]),s._v(" of "),a("code",[s._v("vue-router")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("if "),a("code",[s._v("true")]),s._v(", the navigation will not leave a history record")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(413)},function(s,t,a){function l(s){a(414)}var n=a(13)(null,a(416),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(415);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("66a1dff9",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Commonly used button.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Plain\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Round\n Primary\n Success\n Info\n Warning\n Danger\n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-button",[s._v("Default")]),a("el-button",{attrs:{type:"primary"}},[s._v("Primary")]),a("el-button",{attrs:{type:"success"}},[s._v("Success")]),a("el-button",{attrs:{type:"info"}},[s._v("Info")]),a("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger"}},[s._v("Danger")])],1),a("div",{staticStyle:{margin:"20px 0"}},[a("el-button",{attrs:{plain:""}},[s._v("Plain")]),a("el-button",{attrs:{type:"primary",plain:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",plain:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",plain:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",plain:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",plain:""}},[s._v("Danger")])],1),a("div",[a("el-button",{attrs:{round:""}},[s._v("Round")]),a("el-button",{attrs:{type:"primary",round:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",round:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",round:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",round:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",round:""}},[s._v("Danger")])],1)]),a("p",[s._v("Use "),a("code",[s._v("type")]),s._v(", "),a("code",[s._v("plain")]),s._v(" and "),a("code",[s._v("round")]),s._v(" to define Button's style.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Primary"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px 0"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(">")]),s._v("Plain"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(">")]),s._v("Primary"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("round")]),s._v(">")]),s._v("Round"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("round")]),s._v(">")]),s._v("Primary"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("round")]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("round")]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("round")]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("round")]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Primary\n Success\n Info\n Warning\n Danger\n
    \n\n
    \n Plain\n Primary\n Success\n Info\n Warning\n Danger\n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-button",{attrs:{disabled:""}},[s._v("Default")]),a("el-button",{attrs:{type:"primary",disabled:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",disabled:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",disabled:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",disabled:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",disabled:""}},[s._v("Danger")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{attrs:{plain:"",disabled:""}},[s._v("Plain")]),a("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[s._v("Primary")]),a("el-button",{attrs:{type:"success",plain:"",disabled:""}},[s._v("Success")]),a("el-button",{attrs:{type:"info",plain:"",disabled:""}},[s._v("Info")]),a("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[s._v("Danger")])],1)]),a("p",[s._v("Use "),a("code",[s._v("disabled")]),s._v(" attribute to determine whether a button is disabled. It accepts a "),a("code",[s._v("Boolean")]),s._v(" value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Primary"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Plain"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Primary"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Buttons without border and background.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Text Button\nText Button\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"}},[s._v("Text Button")]),a("el-button",{attrs:{type:"text",disabled:""}},[s._v("Text Button")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\nUpload\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[s._v("Search")]),a("el-button",{attrs:{type:"primary"}},[s._v("Upload"),a("i",{staticClass:"el-icon-upload el-icon-right"})])],1),a("p",[s._v("Use the "),a("code",[s._v("icon")]),s._v(" attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an "),a("code",[s._v("")]),s._v(" tag. Custom icons can be used as well.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Displayed as a button group, can be used to group a series of similar operations.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Previous Page\n Next Page\n\n\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[s._v("Previous Page")]),a("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),a("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),a("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1),a("p",[s._v("Use tag "),a("code",[s._v("")]),s._v(" to group your buttons.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-arrow-left"')]),s._v(">")]),s._v("Previous Page"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Next Page"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-arrow-right el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Click the button to load data, then the button displays a loading state.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Loading\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",loading:!0}},[s._v("Loading")])],1),a("p",[s._v("Set "),a("code",[s._v("loading")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to display loading state.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Loading"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n Medium\n Small\n Mini\n
    \n
    \n Default\n Medium\n Small\n Mini\n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-button",[s._v("Default")]),a("el-button",{attrs:{size:"medium"}},[s._v("Medium")]),a("el-button",{attrs:{size:"small"}},[s._v("Small")]),a("el-button",{attrs:{size:"mini"}},[s._v("Mini")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{attrs:{round:""}},[s._v("Default")]),a("el-button",{attrs:{size:"medium",round:""}},[s._v("Medium")]),a("el-button",{attrs:{size:"small",round:""}},[s._v("Small")]),a("el-button",{attrs:{size:"mini",round:""}},[s._v("Mini")])],1)]),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("medium")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(">")]),s._v("Medium"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Small"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),s._v("Mini"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("round")]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("round")]),s._v(">")]),s._v("Medium"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("round")]),s._v(">")]),s._v("Small"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("round")]),s._v(">")]),s._v("Mini"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("disabled")]),s._v(" attribute determines if the button is disabled.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"text-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Text Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icon-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button Group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("button size")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("button type")]),a("td",[s._v("string")]),a("td",[s._v("primary / success / warning / danger / info / text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("determine whether it's a plain button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("round")]),a("td",[s._v("determine whether it's a round button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("determine whether it's loading")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("disable the button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon class name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as native button's "),a("code",[s._v("autofocus")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("same as native button's "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("button / submit / reset")]),a("td",[s._v("button")])])])])}]}},function(s,t,a){s.exports=a(418)},function(s,t,a){function l(s){a(419)}var n=a(13)(a(421),a(422),l,"data-v-13b8d60a",null);s.exports=n.exports},function(s,t,a){var l=a(420);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("294aba0a",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.clearfix[data-v-13b8d60a]:after,.clearfix[data-v-13b8d60a]:before{display:table;content:""}.clearfix[data-v-13b8d60a]:after{clear:both}.text[data-v-13b8d60a]{font-size:14px}.time[data-v-13b8d60a]{font-size:13px;color:#999}.bottom[data-v-13b8d60a]{margin-top:13px;line-height:12px}.item[data-v-13b8d60a]{margin-bottom:18px}.button[data-v-13b8d60a]{padding:0;float:right}.image[data-v-13b8d60a]{width:100%;display:block}.box-card[data-v-13b8d60a]{width:480px}',""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(147),e=l(n);t.default={data:function(){return{currentDate:e.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("section",[s._m(0),l("p",[s._v("Integrate information in a card container.")]),s._m(1),l("p",[s._v("Card includes title, content and operations.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n Card name\n Operation button\n
    \n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,style:'\n .text {\n font-size: 14px;\n }\n\n .item {\n margin-bottom: 18px;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n .clearfix:after {\n clear: both\n }\n\n .box-card {\n width: 480px;\n }\n'}}},[l("div",{staticClass:"source",slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",slot:"header"},[l("span",[s._v("Card name")]),l("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[s._v("Operation button")])],1),s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("List item "+t)+"\n ")])})],2)],1),l("p",[s._v("Card is made up of "),l("code",[s._v("header")]),s._v(" and "),l("code",[s._v("body")]),s._v(". "),l("code",[s._v("header")]),s._v(" is optional, and its content distribution depends on a named slot.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"header"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Card name"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"float: right; padding: 3px 0"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(">")]),s._v("Operation button"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n }\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),l("p",[s._v("The header part can be omitted.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,style:"\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .box-card {\n width: 480px;\n }\n"}}},[l("div",{staticClass:"source",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("List item "+t)+"\n ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),l("p",[s._v("Display richer content by adding some configs.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n
    \n Yummy hamburger\n
    \n \n Operating button\n
    \n
    \n     \n     \n    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n currentDate: new Date()\n };\n }\n}\n",style:'\n .time {\n font-size: 13px;\n color: #999;\n }\n \n .bottom {\n margin-top: 13px;\n line-height: 12px;\n }\n\n .button {\n padding: 0;\n float: right;\n }\n\n .image {\n width: 100%;\n display: block;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n \n .clearfix:after {\n clear: both\n }\n'}}},[l("div",{staticClass:"source",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(149)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("Yummy hamburger")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("Operating button")])],1)])])],1)}))],1),l("p",[s._v("The "),l("code",[s._v("body-style")]),s._v(" attribute defines CSS style of custom "),l("code",[s._v("body")]),s._v(". This example also uses "),l("code",[s._v("el-col")]),s._v(" for layout.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"(o, index) in 2"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":body-style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"image"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Yummy hamburger"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),l("span",[s._v("{{")]),s._v(" currentDate "),l("span",[s._v("}}")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"button"')]),s._v(">")]),s._v("Operating button"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n }\n \n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".button")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": right;\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".image")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("100%")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n }\n \n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n };\n }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"simple-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-images"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[s._v("¶")]),s._v(" With images")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("Title of the card. Also accepts a DOM passed by "),a("code",[s._v("slot#header")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("CSS style of body")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])]); -}]}},function(s,t,a){s.exports=a(424)},function(s,t,a){function l(s){a(425)}var n=a(13)(a(427),a(428),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(426);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("d4a4578a",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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 .el-carousel__item:nth-child(2n+1){background-color:#d3dce6}.demo-carousel .small h3{font-size:14px;line-height:150px}.demo-carousel .medium h3{font-size:14px;line-height:200px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Loop a series of images or texts in a limited space")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 150px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is hovered (default)")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is clicked")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("Combine "),a("code",[s._v("el-carousel")]),s._v(" with "),a("code",[s._v("el-carousel-item")]),s._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside "),a("code",[s._v("el-carousel-item")]),s._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),a("code",[s._v("trigger")]),s._v(" to "),a("code",[s._v("click")]),s._v(", and the carousel switches only when an indicator is clicked.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is hovered (default)"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is clicked"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("150px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Indicators can be displayed outside the carousel")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("indicator-position")]),s._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("outside")]),s._v(" moves them outside; setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("none")]),s._v(" hides the indicators.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("indicator-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outside"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can define when arrows are displayed")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("arrow")]),s._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),a("code",[s._v("arrow")]),s._v(" to "),a("code",[s._v("always")]),s._v(" or "),a("code",[s._v("never")]),s._v(" shows/hides the arrows permanently.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"5000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("arrow")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"always"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When a page is wide enough but has limited height, you can activate card mode for carousels")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 200px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("Setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._v(" activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indicators"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indicators")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arrows"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arrows")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the carousel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("index of the initially active slide (starting from 0)")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how indicators are triggered")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("whether automatically loop the slides")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("interval of the auto loop, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("position of the indicators")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("when arrows are shown")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the Carousel")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the active slide switches")]),a("td",[s._v("index of the new active slide, index of the old active slide")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("manually switch slide")]),a("td",[s._v("index of the slide to be switched to, starting from 0; or the "),a("code",[s._v("name")]),s._v(" of corresponding "),a("code",[s._v("el-carousel-item")])])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("switch to the previous slide")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("switch to the next slide")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("name of the item, can be used in "),a("code",[s._v("setActiveItem")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("text content for the corresponding indicator")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(430)},function(s,t,a){function l(s){a(431)}var n=a(13)(a(433),a(434),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(432);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("9adf049a",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){"use strict";t.__esModule=!0,t.default={data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"},options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog" -},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["component","data","tag"]}},created:function(){this.optionsWithDisabled=JSON.parse(JSON.stringify(this.options)),this.optionsWithDisabled[0].disabled=!0},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[s.length-1].style.padding="0"})},methods:{handleItemChange:function(s){var t=this;console.log("active item:",s),setTimeout(function(a){s.indexOf("California")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"Los Angeles"}]:s.indexOf("Florida")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"Orlando"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),s._m(1),a("p",[s._v("There are two ways to expand child option items.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Child options expand when clicked (default)\n \n \n
    \n
    \n Child options expand when hovered\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions: [],\n selectedOptions2: []\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when clicked (default)")]),a("el-cascader",{attrs:{options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions,callback:function(t){s.selectedOptions=t},expression:"selectedOptions"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when hovered")]),a("el-cascader",{attrs:{"expand-trigger":"hover",options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions2,callback:function(t){s.selectedOptions2=t},expression:"selectedOptions2"}})],1)]),a("p",[s._v("Assigning the "),a("code",[s._v("options")]),s._v(" attribute to an array of options renders a Cascader. The "),a("code",[s._v("expand-trigger")]),s._v(" attribute defines how child options are expanded. This example also demonstrates the "),a("code",[s._v("change")]),s._v(" event, whose parameter is the value of Cascader, an array made up of the values of each selected level.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when clicked (default)"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when hovered"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("expand-trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }],\n "),a("span",{ -staticClass:"hljs-attr"},[s._v("selectedOptions")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions2")]),s._v(": []\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n optionsWithDisabled: [{\n value: 'guide',\n label: 'Guide',\n disabled: true,\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),a("p",[s._v("In this example, the first item in "),a("code",[s._v("options")]),s._v(" array has a "),a("code",[s._v("disabled: true")]),s._v(" field, so it is disabled. By default, Cascader checks the "),a("code",[s._v("disabled")]),s._v(" field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the "),a("code",[s._v("props")]),s._v(" attribute (see the API table below for details). And of course, field name "),a("code",[s._v("value")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("children")]),s._v(" can also be customized in the same way.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("optionsWithDisabled")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("The input can display only the last level instead of all levels.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n", -style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("The "),a("code",[s._v("show-all-levels")]),s._v(" attribute defines if all levels are displayed. If it is "),a("code",[s._v("false")]),s._v(", only the last level is displayed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":show-all-levels")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }],\n selectedOptions3: ['component', 'data', 'tag']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(t){s.selectedOptions3=t},expression:"selectedOptions3"}})],1),a("p",[s._v("The default value can be defined with an array.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr" -},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v("]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Parent options can also be selected.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),a("p",[s._v("By default only the options in the last level can be selected. By assigning "),a("code",[s._v("change-on-select")]),s._v(" to "),a("code",[s._v("true")]),s._v(", options in parent levels can also be selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{ -staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Load child options when their parent option is clicked or hovered over.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n label: 'California',\n cities: []\n }, {\n label: 'Florida',\n cities: []\n }],\n props: {\n value: 'label',\n children: 'cities'\n }\n };\n },\n\n methods: {\n handleItemChange(val) {\n console.log('active item:', val);\n setTimeout(_ => {\n if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {\n this.options2[0].cities = [{\n label: 'Los Angeles'\n }];\n } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {\n this.options2[1].cities = [{\n label: 'Orlando'\n }];\n }\n }, 300);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),a("p",[s._v("In this example, the options array does not have data of cities when initialized. With the "),a("code",[s._v("active-item-change")]),s._v(" event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how "),a("code",[s._v("props")]),s._v(" is used.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@active-item-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleItemChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cities'")]),s._v("\n }\n };\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleItemChange(val) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'active item:'")]),s._v(", val);\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities.length) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities = [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v("\n }];\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities.length) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities = [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Orlando'")]),s._v("\n }];\n }\n }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Search and select options with a keyword.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Only options of the last level can be selected\n \n
    \n
    \n Options of all levels can be selected\n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Only options of the last level can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:""}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Options of all levels can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:"","change-on-select":""}})],1)]),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-cascader")]),s._v(" enables filtering")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Only options of the last level can be selected"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Try searching: Guide"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Options of all levels can be selected"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Try searching: Guide"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{ -staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Disable an option by setting a "),a("code",[s._v("disabled")]),s._v(" field in the option object.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"display-only-the-last-level"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[s._v("¶")]),s._v(" Display only the last level")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-default-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-default-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" With default value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"change-on-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Change on select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dynamically-load-child-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dynamically-load-child-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dynamically load child options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("options")]),a("td",[s._v("data of the options")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("selected value")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Cascader's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("input placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Cascader is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether selected value can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-trigger")]),a("td",[s._v("trigger mode of expanding current item")]),a("td",[s._v("string")]),a("td",[s._v("click / hover")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("show-all-levels")]),a("td",[s._v("whether to display all levels of the selected value in the input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether the options can be searched")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing filter keyword, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("whether selecting an option of any level is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of option object is used as the option's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("specify which key of option object is used as the option's value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which key of option object is used as the option's child options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of option object indicates if the option is disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-filter")]),a("td",[s._v("hook function before filtering with the value to be filtered as its parameter. If "),a("code",[s._v("false")]),s._v(" is returned or a "),a("code",[s._v("Promise")]),s._v(" is returned and then is rejected, filtering will be aborted")]),a("td",[s._v("function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("active-item-change")]),a("td",[s._v("triggers when active option changes, only works when "),a("code",[s._v("change-on-select")]),s._v(" is "),a("code",[s._v("false")])]),a("td",[s._v("an array of active options")])])])])}]}},function(s,t,a){s.exports=a(436)},function(s,t,a){var l=a(13)(a(437),a(438),null,null,null);s.exports=l.exports},function(s,t){"use strict";var a=["Shanghai","Beijing","Guangzhou","Shenzhen"];s.exports={data:function(){return{checkList:["selected and disabled","Option A"],checked:!0,checked1:!1,checked2:!0,checked3:!0,checked4:!1,checked5:!1,checked6:!0,isValid:"valid",checkAll:!1,cities:a,checkedCities:["Shanghai","Beijing"],checkedCities1:["Shanghai","Beijing"],isIndeterminate:!0,checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],checkboxGroup5:[],checkboxGroup6:[]}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s?a:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){var t=s.length;this.checkAll=t===this.cities.length,this.isIndeterminate=t>0&&t\n \n Option\n\n\n',script:"\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox",{model:{value:s.checked,callback:function(t){s.checked=t},expression:"checked"}},[s._v("Option")])]],2),a("p",[s._v("Define "),a("code",[s._v("v-model")]),s._v("(bind variable) in "),a("code",[s._v("el-checkbox")]),s._v(". The default value is a "),a("code",[s._v("Boolean")]),s._v(" for single "),a("code",[s._v("checkbox")]),s._v(", and it becomes "),a("code",[s._v("true")]),s._v(" when selected. Content inside the "),a("code",[s._v("el-checkbox")]),s._v(" tag will become the description following the button of the checkbox.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Disabled state for checkbox.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(t){s.checked1=t},expression:"checked1"}},[s._v("Option")]),a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(t){s.checked2=t},expression:"checked2"}},[s._v("Option")])]],2),a("p",[s._v("Set the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n checkList: ['selected and disabled','Option A']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{model:{value:s.checkList,callback:function(t){s.checkList=t},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"Option A"}}),a("el-checkbox",{attrs:{label:"Option B"}}),a("el-checkbox",{attrs:{label:"Option C"}}),a("el-checkbox",{attrs:{label:"disabled",disabled:""}}),a("el-checkbox",{attrs:{label:"selected and disabled",disabled:""}})],1)]],2),a("p",[a("code",[s._v("checkbox-group")]),s._v(" element can manage multiple checkboxes in one group by using "),a("code",[s._v("v-model")]),s._v(" which is bound as an "),a("code",[s._v("Array")]),s._v(". Inside the "),a("code",[s._v("el-checkbox")]),s._v(" element, "),a("code",[s._v("label")]),s._v(" is the value of the checkbox. If no content is nested in that tag, "),a("code",[s._v("label")]),s._v(" will be rendered as the description following the button of the checkbox. "),a("code",[s._v("label")]),s._v(" also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkList"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option A"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option B"')]),s._v(">")]),a("span",{ -staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option C"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkList")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'selected and disabled'")]),s._v(","),a("span",{staticClass:"hljs-string"},[s._v("'Option A'")]),s._v("]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkAll: true,\n checkedCities: ['Shanghai', 'Beijing'],\n cities: cityOptions,\n isIndeterminate: true\n };\n },\n methods: {\n handleCheckAllChange(event) {\n this.checkedCities = event.target.checked ? cityOptions : [];\n this.isIndeterminate = false;\n },\n handleCheckedCitiesChange(value) {\n let checkedCount = value.length;\n this.checkAll = checkedCount === this.cities.length;\n this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox",{attrs:{indeterminate:s.isIndeterminate},on:{change:s.handleCheckAllChange},model:{value:s.checkAll,callback:function(t){s.checkAll=t},expression:"checkAll"}},[s._v("Check all")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{on:{change:s.handleCheckedCitiesChange},model:{value:s.checkedCities,callback:function(t){s.checkedCities=t},expression:"checkedCities"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":indeterminate")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkAll"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("Check all"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkAll")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions,\n "),a("span",{staticClass:"hljs-attr"},[s._v("isIndeterminate")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCheckAllChange(event) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkedCities = event.target.checked ? cityOptions : [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n },\n handleCheckedCitiesChange(value) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" checkedCount = value.length;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" && checkedCount < "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkedCities1: ['Shanghai', 'Beijing'],\n cities: cityOptions\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:s.checkedCities1,callback:function(t){s.checkedCities1=t},expression:"checkedCities1"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" \n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Checkbox with button styles.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n export default {\n data () {\n return {\n checkboxGroup1: ['Shanghai'],\n checkboxGroup2: ['Shanghai'],\n checkboxGroup3: ['Shanghai'],\n checkboxGroup4: ['Shanghai'],\n cities: cityOptions\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(t){s.checkboxGroup1=t},expression:"checkboxGroup1"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"medium"},model:{value:s.checkboxGroup2,callback:function(t){s.checkboxGroup2=t},expression:"checkboxGroup2"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup3,callback:function(t){s.checkboxGroup3=t},expression:"checkboxGroup3"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t,disabled:"Beijing"===t}},[s._v(s._s(t))])}))],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup4,callback:function(t){s.checkboxGroup4=t},expression:"checkboxGroup4"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))],1)]],2),a("p",[s._v("You just need to change "),a("code",[s._v("el-checkbox")]),s._v(" element into "),a("code",[s._v("el-checkbox-button")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"city === 'Beijing'\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup2")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup4")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n checked3: true,\n checked4: false,\n checked5: false,\n checked6: true,\n checkboxGroup5: [],\n checkboxGroup6: []\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-checkbox",{attrs:{label:"Option1",border:""},model:{value:s.checked3,callback:function(t){s.checked3=t},expression:"checked3"}}),a("el-checkbox",{attrs:{label:"Option2",border:""},model:{value:s.checked4,callback:function(t){s.checked4=t},expression:"checked4"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox",{attrs:{label:"Option1",border:"",size:"medium"},model:{value:s.checked5,callback:function(t){s.checked5=t},expression:"checked5"}}),a("el-checkbox",{attrs:{label:"Option2",border:"",size:"medium"},model:{value:s.checked6,callback:function(t){s.checked6=t},expression:"checked6"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup5,callback:function(t){s.checkboxGroup5=t},expression:"checkboxGroup5"}},[a("el-checkbox",{attrs:{label:"Option1",border:""}}),a("el-checkbox",{attrs:{label:"Option2",border:"",disabled:""}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:s.checkboxGroup6,callback:function(t){s.checkboxGroup6=t},expression:"checkboxGroup6"}},[a("el-checkbox",{attrs:{label:"Option1",border:""}}),a("el-checkbox",{attrs:{label:"Option2",border:""}})],1)],1)]],2),a("p",[s._v("The "),a("code",[s._v("border")]),s._v(" attribute adds a border to Checkboxes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked5")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked6")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup5")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup6")]),s._v(": []\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-state"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled State")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indeterminate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("indeterminate")]),s._v(" property can help you to achieve a 'check all' effect.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"minimum-maximum-items-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Minimum / Maximum items checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("min")]),s._v(" and "),a("code",[s._v("max")]),s._v(" properties can help you to limit the number of checked items.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-borders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[s._v("¶")]),s._v(" With borders")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("value of the Checkbox when used inside a "),a("code",[s._v("checkbox-group")])]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("value of the Checkbox if it's checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("value of the Checkbox if it's not checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the Checkbox is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether to add a border around Checkbox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the Checkbox, only works when "),a("code",[s._v("border")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("if the Checkbox is checked")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("same as "),a("code",[s._v("indeterminate")]),s._v(" in native checkbox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("the updated value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of checkbox buttons or bordered checkboxes")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the nesting checkboxes are disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("the updated value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("value of the checkbox when used inside a "),a("code",[s._v("checkbox-group")])]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("value of the checkbox if it's checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("value of the checkbox if it's not checked")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the checkbox is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("if the checkbox is checked")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(440)},function(s,t,a){function l(s){a(441)}var n=a(13)(a(443),a(444),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(442);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("7555590c",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Collapse to store contents.")]),s._m(1),a("p",[s._v("You can expand multiple panels")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeNames: ['1']\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(t){s.activeNames=t},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeNames"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeNames")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("]\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In accordion mode, only one panel can be expanded at once")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeName: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("p",[s._v("Activate accordion mode using the "),a("code",[s._v("accordion")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{ -staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n
    Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{slot:"title"},[s._v("\n Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n Consistency"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"header-icon el-icon-information"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom title")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Besides using the "),a("code",[s._v("title")]),s._v(" attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether to activate accordion mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("currently active panel")]),a("td",[s._v("string (accordion mode)/array (non-accordion mode)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when active panels change")]),a("td",[s._v("activeNames: array (non-accordion mode)/string (accordion mode)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("unique identification of the panel")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the panel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(446)},function(s,t,a){function l(s){a(447)}var n=a(13)(a(449),a(450),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(448);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("0c044c02",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){"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(){var s=document.querySelectorAll(".source");s[0].style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("ColorPicker is a color selector supporting multiple color formats.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n With default value\n \n
    \n
    \n With no default value\n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n color1: '#409EFF',\n color2: null\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With default value")]),a("el-color-picker",{model:{value:s.color1,callback:function(t){s.color1=t},expression:"color1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With no default value")]),a("el-color-picker",{model:{value:s.color2,callback:function(t){s.color2=t},expression:"color2"}})],1)]),a("p",[s._v("ColorPicker requires a string typed variable to be bound to v-model.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With default value"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With no default value"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("color1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#409EFF'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("color2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n color3: 'rgba(19, 206, 102, 0.8)'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(t){s.color3=t},expression:"color3"}})],1),a("p",[s._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),a("code",[s._v("show-alpha")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("show-alpha")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("color3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n color4: '#409EFF'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",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",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("color4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#409EFF'")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alpha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alpha")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable the ColorPicker")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of ColorPicker")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("medium / small / mini")])]),a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("whether to display the alpha slider")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("color format of v-model")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for ColorPicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("color value")])]),a("tr",[a("td",[s._v("active-change")]),a("td",[s._v("triggers when the current active color changes")]),a("td",[s._v("active color value")])])])])}]}},function(s,t,a){s.exports=a(452)},function(s,t,a){function l(s){a(453)}var n=a(13)(null,a(455),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(454);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("09912d8e",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.demo-color-box{border-radius:4px;padding:20px;height:74px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-group .demo-color-box{border-radius:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-blue{background-color:#409eff}.bg-success{background-color:#13ce66}.bg-warning{background-color:#f7ba2a}.bg-danger{background-color:#ff4949}.bg-info{background-color:#878d99}.bg-text-primary{background-color:#2d2f33}.bg-text-regular{background-color:#5a5e66}.bg-text-secondary{background-color:#878d99}.bg-text-placeholder{background-color:#b4bccc}.bg-border-base{background-color:#d8dce6}.bg-border-light{background-color:#dfe4ed}.bg-border-lighter{background-color:#e6ebf5}.bg-border-extra-light{background-color:#edf2fc}[class*=" bg-border-"]{color:#5a5e66}',""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),s._m(1),a("p",[s._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#409EFF")])])])],1),s._m(2),a("p",[s._v("Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#67C23A")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#EB9E05")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#FA5555")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Info"),a("div",{staticClass:"value"},[s._v("#878D99")])])])],1),s._m(3),a("p",[s._v("Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-text-primary"},[s._v("Primary Text"),a("div",{staticClass:"value"},[s._v("#2D2F33")])]),a("div",{staticClass:"demo-color-box bg-text-regular"},[s._v("Regular Text"),a("div",{staticClass:"value"},[s._v("#5A5E66")])]),a("div",{staticClass:"demo-color-box bg-text-secondary"},[s._v("Secondary Text"),a("div",{staticClass:"value"},[s._v("#878D99")])]),a("div",{staticClass:"demo-color-box bg-text-placeholder"},[s._v("Placeholder Text"),a("div",{staticClass:"value"},[s._v("#B4BCCC")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-border-base"},[s._v("Base Border"),a("div",{staticClass:"value"},[s._v("#D8DCE6")])]),a("div",{staticClass:"demo-color-box bg-border-light"},[s._v("Light Border"),a("div",{staticClass:"value"},[s._v("#DFE4ED")])]),a("div",{staticClass:"demo-color-box bg-border-lighter"},[s._v("Lighter Border"),a("div",{staticClass:"value"},[s._v("#E6EBF5")])]),a("div",{ -staticClass:"demo-color-box bg-border-extra-light"},[s._v("Extra Light Border"),a("div",{staticClass:"value"},[s._v("#EDF2FC")])])])])],1)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"main-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Main Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"secondary-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Secondary Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"neutral-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Neutral Color")])}]}},function(s,t,a){s.exports=a(457)},function(s,t,a){function l(s){a(458)}var n=a(13)(a(460),a(461),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(459);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("8c598458",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".el-footer,.el-header{background-color:#b3c0d1;color:#333;line-height:60px}.el-aside{color:#333}#common-layouts+.demo-container .el-footer,#common-layouts+.demo-container .el-header{text-align:center}#common-layouts+.demo-container .el-aside{background-color:#d3dce6;text-align:center;line-height:200px}#common-layouts+.demo-container .el-main{background-color:#e9eef3;color:#333;text-align:center;line-height:160px}#common-layouts+.demo-container>.source>.el-container{margin-bottom:40px}#common-layouts+.demo-container>.source>.el-container:nth-child(5) .el-aside,#common-layouts+.demo-container>.source>.el-container:nth-child(6) .el-aside{line-height:260px}#common-layouts+.demo-container>.source>.el-container:nth-child(7) .el-aside{line-height:320px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s={date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"};return{tableData:Array(20).fill(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Container components for scaffolding basic structure of the page:")]),s._m(1),s._m(2),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Header\n Main\n\n\n\n Header\n Main\n Footer\n\n\n\n Aside\n Main\n\n\n\n Header\n \n Aside\n Main\n \n\n\n\n Header\n \n Aside\n \n Main\n Footer\n \n \n\n\n\n Aside\n \n Header\n Main\n \n\n\n\n Aside\n \n Header\n Main\n Footer\n \n\n\n\n',script:null,style:"\n .el-header, .el-footer {\n background-color: #B3C0D1;\n color: #333;\n text-align: center;\n line-height: 60px;\n }\n \n .el-aside {\n background-color: #D3DCE6;\n color: #333;\n text-align: center;\n line-height: 200px;\n }\n \n .el-main {\n background-color: #E9EEF3;\n color: #333;\n text-align: center;\n line-height: 160px;\n }\n \n body > .el-container {\n margin-bottom: 40px;\n }\n \n .el-container:nth-child(5) .el-aside,\n .el-container:nth-child(6) .el-aside {\n line-height: 260px;\n }\n \n .el-container:nth-child(7) .el-aside {\n line-height: 320px;\n }\n"}}},[a("div",{staticClass:"source",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",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-aside")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-aside")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-aside")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-aside")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-aside")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("Aside"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-header")]),s._v(">")]),s._v("Header"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-main")]),s._v(">")]),s._v("Main"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-footer")]),s._v(">")]),s._v("Footer"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-header")]),s._v(", "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-footer")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#B3C0D1")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#333")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("60px")]),s._v(";\n }\n \n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-aside")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#D3DCE6")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#333")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n }\n \n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-main")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#E9EEF3")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#333")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("160px")]),s._v(";\n }\n \n "),a("span",{staticClass:"hljs-selector-tag"},[s._v("body")]),s._v(" > "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-container")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n }\n \n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-container")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(5)")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-aside")]),s._v(",\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-container")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(6)")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-aside")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("260px")]),s._v(";\n }\n \n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-container")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(7)")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-aside")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("320px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n Option 1\n Option 2\n \n \n Option 3\n \n \n \n Option 4-1\n \n \n \n \n \n \n \n \n \n \n View\n Add\n Delete\n \n \n Tom\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n\n',script:"\n export default {\n data() {\n const item = {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n };\n return {\n tableData: Array(20).fill(item)\n }\n }\n };\n",style:"\n .el-header {\n background-color: #B3C0D1;\n color: #333;\n line-height: 60px;\n }\n \n .el-aside {\n color: #333;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[a("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[a("el-menu",{attrs:{"default-openeds":["1","3"]}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item-group",[a("template",{slot:"title"},[s._v("Group 1")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("Option 1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("Option 2")])],2),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("Option 3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("Option4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("Option 4-1")])],2)],2),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-menu"}),s._v("Navigator Two")]),a("el-menu-item-group",[a("template",{slot:"title"},[s._v("Group 1")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("Option 1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("Option 2")])],2),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"2-3"}},[s._v("Option 3")])],1),a("el-submenu",{attrs:{index:"2-4"}},[a("template",{slot:"title"},[s._v("Option 4")]),a("el-menu-item",{attrs:{index:"2-4-1"}},[s._v("Option 4-1")])],2)],2),a("el-submenu",{attrs:{index:"3"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-setting"}),s._v("Navigator Three")]),a("el-menu-item-group",[a("template",{slot:"title"},[s._v("Group 1")]),a("el-menu-item",{attrs:{index:"3-1"}},[s._v("Option 1")]),a("el-menu-item",{attrs:{index:"3-2"}},[s._v("Option 2")])],2),a("el-menu-item-group",{attrs:{title:"Group 2"}},[a("el-menu-item",{attrs:{index:"3-3"}},[s._v("Option 3")])],1),a("el-submenu",{attrs:{index:"3-4"}},[a("template",{slot:"title"},[s._v("Option 4")]),a("el-menu-item",{attrs:{index:"3-4-1"}},[s._v("Option 4-1")])],2)],2)],1)],1),a("el-container",[a("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[a("el-dropdown",[a("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("View")]),a("el-dropdown-item",[s._v("Add")]),a("el-dropdown-item",[s._v("Delete")])],1)],1),a("span",[s._v("Tom")])],1),a("el-main",[a("el-table",{attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"height: 500px; border: 1px solid #eee"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-aside")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"background-color: rgb(238, 241, 246)"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-openeds")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['1', '3']\"")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("Option 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("Option 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("Option 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Option4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("Option 4-1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("Option 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("Option 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("Option 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Option 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-4-1"')]),s._v(">")]),s._v("Option 4-1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Group 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3-1"')]),s._v(">")]),s._v("Option 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3-2"')]),s._v(">")]),s._v("Option 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group 2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3-3"')]),s._v(">")]),s._v("Option 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3-4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Option 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3-4-1"')]),s._v(">")]),s._v("Option 4-1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n \n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-container")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-header")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text-align: right; font-size: 12px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-right: 15px"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("View"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Add"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Tom"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n \n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-main")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"140"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-header")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#B3C0D1")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#333")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("60px")]),s._v(";\n }\n \n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-aside")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#333")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" item = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Array")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("20")]),s._v(").fill(item)\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"container"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#container","aria-hidden":"true"}},[s._v("¶")]),s._v(" Container")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("")]),s._v(": wrapper container. When nested with a "),a("code",[s._v("")]),s._v(" or "),a("code",[s._v("")]),s._v(", all its child elements will be vertically arranged. Otherwise horizontally.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("")]),s._v(": container for headers.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("")]),s._v(": container for side sections (usually a side nav).")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("")]),s._v(": container for main sections.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("")]),s._v(": container for footers.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("These components use flex for layout, so please make sure your browser supports it. Besides, "),a("code",[s._v("")]),s._v("'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a "),a("code",[s._v("")]),s._v(".")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"common-layouts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#common-layouts","aria-hidden":"true"}},[s._v("¶")]),s._v(" Common layouts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[s._v("¶")]),s._v(" Example")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"container-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Container Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("direction")]),a("td",[s._v("layout direction for child elements")]),a("td",[s._v("string")]),a("td",[s._v("horizontal / vertical")]),a("td",[s._v("vertical when nested with "),a("code",[s._v("el-header")]),s._v(" or "),a("code",[s._v("el-footer")]),s._v("; horizontal otherwise")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"header-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Header Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the header")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("60px")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"aside-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Aside Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of the side section")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("300px")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"footer-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Footer Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the footer")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("60px")])])])])}]}},function(s,t,a){s.exports=a(463)},function(s,t,a){var l=a(13)(null,a(464),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom theme")]),a("p",[s._v("Under construction.")])])}]}},function(s,t,a){s.exports=a(466)},function(s,t,a){function l(s){a(467)}var n=a(13)(a(469),a(470),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(468);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("678d7434",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Date Picker for date input.")]),s._m(1),a("p",[s._v("Basic date picker measured by 'day'.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions1: {\n shortcuts: [{\n text: 'Today',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Yesterday',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: 'A week ago',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: '',\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Picker with quick options")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("The measurement is determined by the "),a("code",[s._v("type")]),s._v(" attribute. You can enable quick options by creating a "),a("code",[s._v("picker-options")]),s._v(" object with "),a("code",[s._v("shortcuts")]),s._v(" property. The disabled date is set by "),a("code",[s._v("disabledDate")]),s._v(", which is a function.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Picker with quick options"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can choose week, month or year by extending the standard date picker component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Week\n \n \n
    \n
    \n Month\n \n \n
    \n
    \n Year\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value3: '',\n value4: '',\n value5: ''\n };\n }\n };\n", -style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Week")]),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Month")]),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Year")]),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Week"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"week"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Week WW"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a week"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Month"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"month"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a month"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Year"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"year"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a year"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Picking a date range is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: 'Last week',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last month',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value6: '',\n value7: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With quick options")]),a("el-date-picker",{attrs:{type:"daterange",align:"right","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("range-separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"To"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("start-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("end-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End date"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With quick options"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("range-separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"To"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("start-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("end-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"enter-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Enter Date")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"other-measurements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[s._v("¶")]),s._v(" Other measurements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date Range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder in non-range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("placeholder for the start date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("placeholder for the end date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DatePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("optional default time of the picker")]),a("td",[s._v("Date")]),a("td",[s._v("anything accepted by "),a("code",[s._v("new Date()")])]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("a callback that triggers when the seleted date is changed. Only for "),a("code",[s._v("daterange")]),s._v(" and "),a("code",[s._v("datetimerange")]),s._v(".")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("-")])])])])}]}},function(s,t,a){s.exports=a(472)},function(s,t,a){function l(s){a(473)}var n=a(13)(a(475),a(476),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(474);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("68bf9944",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:new Date,value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:"",value15:"",value16:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Select date and time in one picker.")]),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions1: {\n shortcuts: [{\n text: 'Today',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: 'Yesterday',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: 'A week ago',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("You can select date and time in one picker at the same time by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetime")]),s._v(". The way to use shortcuts is the same as Date Picker.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{ -staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions2: {\n shortcuts: [{\n text: 'Last week',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last month',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value4: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1)]],2),a("p",[s._v("You can select date and time range by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetimerange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("range-separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"To"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("start-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("end-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End date"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("range-separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"To"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("start-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("end-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("11")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(")],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on "),a("code",[s._v("pickerOptions")]),s._v(" and other attributes, you can refer to DatePicker and TimePicker.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder in non-range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("placeholder for the start date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("placeholder for the end date in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DateTimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("-")])])])])}]}},function(s,t,a){s.exports=a(478)},function(s,t,a){function l(s){a(479)}var n=a(13)(a(481),a(482),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(480);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("63a0e372",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-dialog .dialog-footer button:first-child{margin-right:10px}.demo-box.demo-dialog .full-image{width:100%}.demo-box.demo-dialog .el-dialog__wrapper{margin:0}.demo-box.demo-dialog .el-input,.demo-box.demo-dialog .el-select{width:300px}.demo-box.demo-dialog .el-button--text{margin-right:15px}",""])},function(s,t){"use strict";s.exports={data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,outerVisible:!1,innerVisible:!1,centerDialogVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}},methods:{handleClose:function(s){this.$confirm("Are you sure to close this dialog?").then(function(t){s()}).catch(function(s){})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Informs users while preserving the current page state.")]),s._m(1),a("p",[s._v("Dialog pops up a dialog box, and it's quite customizable.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'click to open the Dialog\n\n\n This is a message\n \n Cancel\n Confirm\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n dialogVisible: false\n };\n },\n methods: {\n handleClose(done) {\n this.$confirm('Are you sure to close this dialog?')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("click to open the Dialog")]),a("el-dialog",{attrs:{title:"Tips",visible:s.dialogVisible,width:"30%","before-close":s.handleClose},on:{"update:visible":function(t){s.dialogVisible=t}}},[a("span",[s._v("This is a message")]),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Set the "),a("code",[s._v("visible")]),s._v(" attribute with a "),a("code",[s._v("Boolean")]),s._v(", and Dialog shows when it is "),a("code",[s._v("true")]),s._v(". The Dialog has two parts: "),a("code",[s._v("body")]),s._v(" and "),a("code",[s._v("footer")]),s._v(", and the latter requires a "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("footer")]),s._v(". The optional "),a("code",[s._v("title")]),s._v(" attribute (empty by default) is for defining a title. Finally, this example demonstrates how "),a("code",[s._v("before-close")]),s._v(" is used.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tips"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"30%"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":before-close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("This is a message"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClose(done) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'Are you sure to close this dialog?'")]),s._v(")\n .then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n done();\n })\n .catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {});\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("p",[s._v("The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\nopen a Table nested Dialog\n\n\n \n \n \n \n \n\n\n\nopen a Form nested Dialog\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n Cancel\n Confirm\n \n\n\n\n', -script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-03',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n dialogTableVisible: false,\n dialogFormVisible: false,\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n formLabelWidth: '120px'\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("open a Table nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogTableVisible},on:{"update:visible":function(t){s.dialogTableVisible=t}}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("open a Form nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogFormVisible},on:{"update:visible":function(t){s.dialogFormVisible=t}}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":s.formLabelWidth}},[a("el-input",{attrs:{"auto-complete":"off"},model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Zones","label-width":s.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Confirm")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("open a Table nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("open a Form nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zones"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please select a zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogTableVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogFormVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelWidth")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'120px'")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n outerVisible: false,\n innerVisible: false\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.outerVisible=!0}}},[s._v("open the outer Dialog")]),a("el-dialog",{attrs:{title:"Outter Dialog",visible:s.outerVisible},on:{"update:visible":function(t){s.outerVisible=t}}},[a("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:s.innerVisible,"append-to-body":""},on:{"update:visible":function(t){s.innerVisible=t}}}),a("div",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.outerVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.innerVisible=!0}}},[s._v("open the inner Dialog")])],1)],1)]],2),a("p",[s._v("Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set "),a("code",[s._v("append-to-body")]),s._v(" of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outerVisible = true"')]),s._v(">")]),s._v("open the outer Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n \n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Outter Dialog"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outerVisible"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"30%"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Inner Dialog"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"innerVisible"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("append-to-body")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outerVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"innerVisible = true"')]),s._v(">")]),s._v("open the inner Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("outerVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("innerVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),a("p",[s._v(":::")]),s._m(6),a("p",[s._v("Dialog's content can be centered.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Click to open the Dialog\n\n\n It should be noted that the content will not be aligned in center by default\n \n Cancel\n Confirm\n \n\n\n\n',script:"\n export default {\n data() {\n return {\n centerDialogVisible: false\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.centerDialogVisible=!0}}},[s._v("Click to open the Dialog")]),a("el-dialog",{attrs:{title:"Warning",visible:s.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(t){s.centerDialogVisible=t}}},[a("span",[s._v("It should be noted that the content will not be aligned in center by default")]),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.centerDialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.centerDialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Setting "),a("code",[s._v("center")]),s._v(" to "),a("code",[s._v("true")]),s._v(" will center dialog's header and footer horizontally.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"centerDialogVisible = true"')]),s._v(">")]),s._v("Click to open the Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"centerDialogVisible"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"30%"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("center")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("It should be noted that the content will not be aligned in center by default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"centerDialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("centerDialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("code",[s._v("before-close")]),s._v(" only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the "),a("code",[s._v("footer")]),s._v(" named slot, you can add what you would do with "),a("code",[s._v("before-close")]),s._v(" in the buttons' click event handler.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If a Dialog is nested in another Dialog, "),a("code",[s._v("append-to-body")]),s._v(" is required.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"centered-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[a("code",[s._v("center")]),s._v(" only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("If the variable bound to "),a("code",[s._v("visible")]),s._v(" is managed in Vuex store, the "),a("code",[s._v(".sync")]),s._v(" can not work properly. In this case, please remove the "),a("code",[s._v(".sync")]),s._v(" modifier, listen to "),a("code",[s._v("open")]),s._v(" and "),a("code",[s._v("close")]),s._v(" events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("visible")]),a("td",[s._v("visibility of Dialog, supports the .sync modifier")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("50%")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("whether the Dialog takes up full screen")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("value for "),a("code",[s._v("margin-top")]),s._v(" of Dialog CSS, works when "),a("code",[s._v("size")]),s._v(" is not "),a("code",[s._v("full")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15vh")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("whether a mask is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("append-to-body")]),a("td",[s._v("whether to append Dialog itself to body. A nested Dialog should have this attribute set to "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("whether scroll of body is disabled while Dialog is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("custom class names for Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("whether the Dialog can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("whether the Dialog can be closed by pressing ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("before-close")]),a("td",[s._v("callback before Dialog closes, and it will prevent Dialog from closing")]),a("td",[s._v("function(done)，done is used to close the Dialog")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to align the header and footer in center")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])]); -},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Dialog")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("content of the Dialog title")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("content of the Dialog footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("triggers when the Dialog opens")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when the Dialog closes")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(484)},function(s,t,a){function l(s){a(485)}var n=a(13)(a(487),a(488),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(486);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("e195950a",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box .el-dropdown{vertical-align:top}.demo-box .el-dropdown+.el-dropdown{margin-left:15px}.demo-box .el-dropdown-link{cursor:pointer;color:#409eff}.demo-box .el-icon-caret-bottom{font-size:12px}.block-col-2{margin:-24px}.block-col-2 .el-col{padding:30px 0;text-align:center;border-right:1px solid #eff2f6}.block-col-2 .el-col:last-child{border-right:0}.demo-dropdown .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Toggleable menu for displaying lists of links and actions.")]),s._m(1),a("p",[s._v("Hover on the dropdown menu to unfold it for more actions.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-caret-bottom {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._v("The triggering element is rendered by the default "),a("code",[s._v("slot")]),s._v(", and the dropdown part is rendered by the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("dropdown")]),s._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-icon-caret-bottom")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n")])])])]),s._m(2),a("p",[s._v("Use the button to trigger the dropdown list.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n Dropdown List\n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n\n',script:"\n export default {\n methods: {\n handleClick() {\n alert('button click');\n }\n }\n }\n",style:"\n .el-dropdown {\n vertical-align: top;\n }\n .el-dropdown + .el-dropdown {\n margin-left: 15px;\n }\n .el-icon-caret-bottom {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n Dropdown List\n "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("p",[s._v("Use "),a("code",[s._v("split-button")]),s._v(" to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class "),a("code",[s._v("divider")]),s._v(" to item four.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n Dropdown List\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-dropdown")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("vertical-align")]),s._v(": top;\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-dropdown")]),s._v(" + "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-dropdown")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("15px")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-icon-caret-bottom")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClick() {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'button click'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Click the triggering element or hover on it.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n hover to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n \n click to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-caret-bottom {\n font-size: 12px;\n }\n .demonstration {\n display: block;\n color: #8492a6;\n font-size: 14px;\n margin-bottom: 20px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover to trigger")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click to trigger")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1)],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("trigger")]),s._v(". By default, it is "),a("code",[s._v("hover")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("click to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-icon-caret-bottom")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".demonstration")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#8492a6")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n',script:null,style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-caret-bottom {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._v("By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":hide-on-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag" -},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-icon-caret-bottom")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n\n\n\n',script:"\n export default {\n methods: {\n handleCommand(command) {\n this.$message('click on item ' + command);\n }\n }\n }\n",style:"\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-caret-bottom {\n font-size: 12px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"d"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"e"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-dropdown-link")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-icon-caret-bottom")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCommand(command) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'click on item '")]),s._v(" + command);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Default\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Medium\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Small\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n\n\n Mini\n \n Action 1\n Action 2\n Action 3\n Action 4\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[s._v("\n Default\n "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1),a("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[s._v("\n Medium\n "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1),a("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[s._v("\n Small\n "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1),a("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[s._v("\n Mini\n "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")])],1)],1)],1),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("medium")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n Default\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n Medium\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n Small\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n Mini\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"triggering-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Triggering element")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"how-to-trigger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[s._v("¶")]),s._v(" How to trigger")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-hiding-behavior"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu hiding behavior")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("hide-on-click")]),s._v(" to define if menu closes on clicking.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"command-event"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[s._v("¶")]),s._v(" Command event")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("menu button type, refer to "),a("code",[s._v("Button")]),s._v(" Component, only works when "),a("code",[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("menu size, refer to "),a("code",[s._v("Button")]),s._v(" Component, also works on the Split-button")]),a("td",[s._v("string")]),a("td",[s._v("large / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("whether a button group is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("component size, refer to "),a("code",[s._v("Button")]),s._v(" component")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("placement of pop menu")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),a("td",[s._v("bottom-end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how to trigger")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("whether to hide menu after clicking menu-item")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("if "),a("code",[s._v("split-button")]),s._v(" is "),a("code",[s._v("true")]),s._v(", triggers when left button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("triggers when a dropdown item is clicked")]),a("td",[s._v("the command dispatched from the dropdown item")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("a command to be dispatched to Dropdown's "),a("code",[s._v("command")]),s._v(" callback")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the item is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("whether a divider is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(490)},function(s,t,a){function l(s){a(491)}var n=a(13)(a(493),a(494),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(492);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("997cc392",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.demo-form.demo-en-US .el-select .el-input{width:360px}.demo-form.demo-en-US .el-form{width:480px}.demo-form.demo-en-US .line{text-align:center}.demo-form.demo-en-US .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-en-US .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-en-US .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-en-US .el-checkbox-group:after,.demo-form.demo-en-US .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-en-US .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-en-US .demo-form-normal{width:480px}.demo-form.demo-en-US .demo-form-inline{width:auto}.demo-form.demo-en-US .demo-form-inline .el-input{width:150px}.demo-form.demo-en-US .demo-form-inline>*{margin-right:10px}.demo-form.demo-en-US .demo-ruleForm{width:480px}.demo-form.demo-en-US .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-en-US .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-en-US .fr{float:right}',""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=this,t=function(s,t,a){return t?void setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3):a(new Error("Please input the age"))},a=function(t,a,l){""===a?l(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(new Error("Please input the password again")):a!==s.ruleForm2.pass?l(new Error("Two inputs don't match!")):l()};return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},labelPosition:"right",formLabelAlign:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]},rules2:{pass:[{validator:a,trigger:"blur"}],checkPass:[{validator:l,trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{key:Date.now(),value:""}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},onRuleFormSubmit:function(){console.log("onRuleFormSubmit")},submitForm:function(s){this.$refs[s].validate(function(s){return s?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);t!==-1&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Cancel\n \n\n\n', -script:"\n export default {\n data() {\n return {\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.form.date1,callback:function(t){s.form.date1=t},expression:"form.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.form.date2,callback:function(t){s.form.date2=t},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.form.delivery,callback:function(t){s.form.delivery=t},expression:"form.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:s.form.type,callback:function(t){s.form.type=t},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:s.form.resource,callback:function(t){s.form.resource=t},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(t){s.form.desc=t},expression:"form.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),a("el-button",[s._v("Cancel")])],1)],1)],1),a("p",[s._v("In each "),a("code",[s._v("form")]),s._v(" component, you need a "),a("code",[s._v("form-item")]),s._v(" field to be the container of your input item.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity time"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Instant delivery"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity type"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.type"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Online activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Offline activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Resources"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.resource"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Sponsor"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Venue"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n Query\n \n\n\n',script:"\n export default {\n data() {\n return {\n formInline: {\n user: '',\n region: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:s.formInline.user,callback:function(t){s.formInline.user=t},expression:"formInline.user"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.formInline.region,callback:function(t){s.formInline.region=t},expression:"formInline.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Query")])],1)],1)],1),a("p",[s._v("Set the "),a("code",[s._v("inline")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the form will be inline.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":inline")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Approved by"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.user"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Approved by"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("Query"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("formInline")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("user")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Depending on your design, there are several different ways to align your label element.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Left\n Right\n Top\n\n
    \n\n \n \n \n \n \n \n \n \n \n\n\n',script:"\n export default {\n data() {\n return {\n labelPosition: 'right',\n formLabelAlign: {\n name: '',\n region: '',\n type: ''\n }\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.labelPosition,callback:function(t){s.labelPosition=t},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("Left")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("Right")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("Top")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"100px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{model:{value:s.formLabelAlign.name,callback:function(t){s.formLabelAlign.name=t},expression:"formLabelAlign.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{model:{value:s.formLabelAlign.region,callback:function(t){s.formLabelAlign.region=t},expression:"formLabelAlign.region"}})],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{model:{value:s.formLabelAlign.type,callback:function(t){s.formLabelAlign.type=t},expression:"formLabelAlign.type"}})],1)],1)],1),a("p",[s._v("The "),a("code",[s._v("label-position")]),s._v(" attribute decides how labels align, it can be "),a("code",[s._v("top")]),s._v(" or "),a("code",[s._v("left")]),s._v(". When set to "),a("code",[s._v("top")]),s._v(", labels will be placed at the top of the form field.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("Left"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("Right"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("Top"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{ -staticClass:"hljs-string"},[s._v('"formLabelAlign.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.region"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("labelPosition")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'right'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelAlign")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Form component allows you to verify your data, helping you find and correct errors.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Reset\n \n\n\n',script:"\n export default {\n data() {\n return {\n ruleForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n rules: {\n name: [\n { required: true, message: 'Please input Activity name', trigger: 'blur' },\n { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }\n ],\n region: [\n { required: true, message: 'Please select Activity zone', trigger: 'change' }\n ],\n date1: [\n { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }\n ],\n date2: [\n { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }\n ],\n type: [\n { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }\n ],\n resource: [\n { required: true, message: 'Please select activity resource', trigger: 'change' }\n ],\n desc: [\n { required: true, message: 'Please input activity form', trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{model:{value:s.ruleForm.name,callback:function(t){s.ruleForm.name=t},expression:"ruleForm.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.ruleForm.region,callback:function(t){s.ruleForm.region=t},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.ruleForm.date1,callback:function(t){s.ruleForm.date1=t},expression:"ruleForm.date1"}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.ruleForm.date2,callback:function(t){s.ruleForm.date2=t},expression:"ruleForm.date2"}})],1)],1)],1),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.ruleForm.delivery,callback:function(t){s.ruleForm.delivery=t},expression:"ruleForm.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{model:{value:s.ruleForm.type,callback:function(t){s.ruleForm.type=t},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{model:{value:s.ruleForm.resource,callback:function(t){s.ruleForm.resource=t},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"Sponsorship"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.ruleForm.desc,callback:function(t){s.ruleForm.desc=t},expression:"ruleForm.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm")}}},[s._v("Create")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Just add the "),a("code",[s._v("rule")]),s._v(" attribute for "),a("code",[s._v("Form")]),s._v(" component, pass validation rules, and set "),a("code",[s._v("prop")]),s._v(" attribute for "),a("code",[s._v("Form-Item")]),s._v(" as a specific key that needs to be validated. See more information at "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"region"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Instant delivery"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delivery"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity type"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Online activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Offline activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Resources"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resource"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Sponsorship"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Venue"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("rules")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please input Activity name'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("min")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("max")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Length should be 3 to 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select Activity zone'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please pick a date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please pick a time'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'array'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select at least one activity type'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{ -staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select activity resource'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please input activity form'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n Submit\n Reset\n \n\n\n',script:"\n export default {\n data() {\n var checkAge = (rule, value, callback) => {\n if (!value) {\n return callback(new Error('Please input the age'));\n }\n setTimeout(() => {\n if (!Number.isInteger(value)) {\n callback(new Error('Please input digits'));\n } else {\n if (value < 18) {\n callback(new Error('Age must be greater than 18'));\n } else {\n callback();\n }\n }\n }, 1000);\n };\n var validatePass = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('Please input the password'));\n } else {\n if (this.ruleForm2.checkPass !== '') {\n this.$refs.ruleForm2.validateField('checkPass');\n }\n callback();\n }\n };\n var validatePass2 = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('Please input the password again'));\n } else if (value !== this.ruleForm2.pass) {\n callback(new Error('Two inputs don\\'t match!'));\n } else {\n callback();\n }\n };\n return {\n ruleForm2: {\n pass: '',\n checkPass: '',\n age: ''\n },\n rules2: {\n pass: [\n { validator: validatePass, trigger: 'blur' }\n ],\n checkPass: [\n { validator: validatePass2, trigger: 'blur' }\n ],\n age: [\n { validator: checkAge, trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,"status-icon":"",rules:s.rules2,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.pass,callback:function(t){s.ruleForm2.pass=t},expression:"ruleForm2.pass"}})],1),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.checkPass,callback:function(t){s.ruleForm2.checkPass=t},expression:"ruleForm2.checkPass"}})],1),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{model:{value:s.ruleForm2.age,callback:function(t){s.ruleForm2.age=s._n(t)},expression:"ruleForm2.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Here we use "),a("code",[s._v("status-icon")]),s._v(" to reflect validation result as an icon.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pass"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Confirm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkPass"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.age"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" checkAge = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the age'")]),s._v("));\n }\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v(".isInteger(value)) {\n callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input digits'")]),s._v("));\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value < "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(") {\n callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Age must be greater than 18'")]),s._v("));\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n callback();\n }\n }\n }, "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password'")]),s._v("));\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{staticClass:"hljs-string"},[s._v("'checkPass'")]),s._v(");\n }\n callback();\n }\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass2 = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password again'")]),s._v("));\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value !== "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.pass) {\n callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Two inputs don\\'t match!'")]),s._v("));\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n callback();\n }\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm2")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("rules2")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass2, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": checkAge, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n Delete\n \n \n Submit\n New domain\n Reset\n \n\n\n',script:"\n export default {\n data() {\n return {\n dynamicValidateForm: {\n domains: [{\n key: 1,\n value: ''\n }],\n email: ''\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n },\n removeDomain(item) {\n var index = this.dynamicValidateForm.domains.indexOf(item);\n if (index !== -1) {\n this.dynamicValidateForm.domains.splice(index, 1);\n }\n },\n addDomain() {\n this.dynamicValidateForm.domains.push({\n key: Date.now(),\n value: ''\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:"blur,change"}]}},[a("el-input",{model:{value:s.dynamicValidateForm.email,callback:function(t){s.dynamicValidateForm.email=t},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(t,l){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+l,prop:"domains."+l+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(s){t.value=s},expression:"domain.value"}}),a("el-button",{on:{click:function(a){a.preventDefault(),s.removeDomain(t)}}},[s._v("Delete")])],1)}),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("dynamicValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:s.addDomain}},[s._v("New domain")]),a("el-button",{on:{click:function(t){s.resetForm("dynamicValidateForm")}}},[s._v("Reset")])],1)],2)],1),a("p",[s._v("In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"email"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Email"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n { required: true, message: 'Please input email address', trigger: 'blur' },\n { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }\n ]\"")]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Domain' + index\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.key"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n required: true, message: 'domain can not be null', trigger: 'blur'\n }\"")]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.value"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addDomain"')]),s._v(">")]),s._v("New domain"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicValidateForm")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("domains")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("email")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n },\n removeDomain(item) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" index = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item);\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n }\n },\n addDomain() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n Submit\n Reset\n \n\n\n', -script:"\n export default {\n data() {\n return {\n numberValidateForm: {\n age: ''\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[a("el-input",{attrs:{type:"age","auto-complete":"off"},model:{value:s.numberValidateForm.age,callback:function(t){s.numberValidateForm.age=s._n(t)},expression:"numberValidateForm.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("numberValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("numberValidateForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Number Validate need a "),a("code",[s._v(".number")]),s._v(" modifier added on the input "),a("code",[s._v("v-model")]),s._v(" binding，it's used to transform the string value to the number which is provided by Vuejs.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n { required: true, message: 'age is required'},\n { type: 'number', message: 'age must be a number'}\n ]\"")]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm.age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("numberValidateForm")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Form consists of "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("radio")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("checkbox")]),s._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("It includes all kinds of input items, such as "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("radio")]),s._v(" and "),a("code",[s._v("checkbox")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"inline-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inline form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"validation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Validation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-validation-rules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom validation rules")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Delete or add form items dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"number-validate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Number Validate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("When an "),a("code",[s._v("el-form-item")]),s._v(" is nested in another "),a("code",[s._v("el-form-item")]),s._v(", its label width will be "),a("code",[s._v("0")]),s._v(". You can set "),a("code",[s._v("label-width")]),s._v(" on that "),a("code",[s._v("el-form-item")]),s._v(" if needed.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("data of form component")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("whether the form is inline")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("position of label")]),a("td",[s._v("string")]),a("td",[s._v("left/right/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, and all its direct child form items will inherit this value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("suffix of the label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("inline-message")]),a("td",[s._v("whether to display the error message inline with the form item")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status-icon")]),a("td",[s._v("whether to display an icon indicating the validation result")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("the method to validate the whole form")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("the method to validate a certain form item")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("reset all the fields and remove validation result")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("a key of "),a("code",[s._v("model")]),s._v(". In the use of validate and resetFields method, the attribute is required")]),a("td",[s._v("string")]),a("td",[s._v("keys of model that passed to "),a("code",[s._v("form")])]),a("td")]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, e.g. '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("whether the field is required or not, will be determined by validation rules if omitted")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("field error message, set its value and the field will validate error and show this message immediately")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("inline-message")]),a("td",[s._v("inline style validate message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Form Item")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("content of label")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("resetField")]),a("td",[s._v("reset current field and remove validation result")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(496)},function(s,t,a){var l=a(13)(a(497),a(498),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";var l=a(229);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h1",[s._v("Components Document")])])}]}},function(s,t,a){s.exports=a(500)},function(s,t,a){var l=a(13)(null,a(501),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"internationalization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internationalization")]),a("p",[s._v("The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("Or if you are importing Element on demand:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("The Chinese language pack is imported by default, even if you're using another language. But with "),a("code",[s._v("NormalModuleReplacementPlugin")]),s._v(" provided by webpack you can replace default locale:")]),a("p",[s._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n ]\n}\n")])]),a("h2",{attrs:{id:"compatible-with"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n@5.x")])]),a("p",[s._v("Element is compatible with "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v(", which makes multilingual switching even easier.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", enLocale)\n")])]),a("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with other i18n plugins")]),a("p",[s._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("path, options")]),s._v(") ")]),s._v("{\n "),a("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n }\n})\n")])]),a("h2",{attrs:{id:"compatible-with-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n@6.x")])]),a("p",[s._v("You need to manually handle it for compatibility with "),a("code",[s._v("6.x")]),s._v(".")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" messages = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("en")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'hello'")]),s._v(",\n ...enLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// Or use `Object.assign({ message: 'hello' }, enLocale)`")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("zh")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你好'")]),s._v(",\n ...zhLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// Or use `Object.assign({ message: '你好' }, zhLocale)`")]),s._v("\n }\n}\n"),a("span",{staticClass:"hljs-comment"},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" i18n = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{staticClass:"hljs-attr"},[s._v("locale")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale")]),s._v("\n messages, "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value)\n})\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(")\n")])]),a("h2",{attrs:{id:"custom-i18n-in-on-demand-components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-i18n-in-on-demand-components","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom i18n in on-demand components")]),a("pre",[a("code",{staticClass:"hljs language-js"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" DatePicker "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element/lib/date-picker'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" messages = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("en")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'hello'")]),s._v(",\n ...enLocale\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("zh")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你好'")]),s._v(",\n ...zhLocale\n }\n}\n"),a("span",{staticClass:"hljs-comment"},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" i18n = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{staticClass:"hljs-attr"},[s._v("locale")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale")]),s._v("\n messages, "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale messages")]),s._v("\n})\n\nElementLocale.i18n("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value))\n")])]),a("h2",{attrs:{id:"import-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import via CDN")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])]),a("p",[s._v("Compatible with "),a("code",[s._v("vue-i18n")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag" -},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])]),a("p",[s._v("Currently Element ships with the following languages:")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("Simplified Chinese (zh-CN)")]),a("li",[s._v("English (en)")]),a("li",[s._v("German (de)")]),a("li",[s._v("Portuguese (pt)")]),a("li",[s._v("Spanish (es)")]),a("li",[s._v("Danish (da)")]),a("li",[s._v("French (fr)")]),a("li",[s._v("Norwegian (nb-NO)")]),a("li",[s._v("Traditional Chinese (zh-TW)")]),a("li",[s._v("Italian (it)")]),a("li",[s._v("Korean (ko)")]),a("li",[s._v("Japanese (ja)")]),a("li",[s._v("Dutch (nl)")]),a("li",[s._v("Vietnamese (vi)")]),a("li",[s._v("Russian (ru-RU)")]),a("li",[s._v("Turkish (tr-TR)")]),a("li",[s._v("Brazilian Portuguese (pt-br)")]),a("li",[s._v("Farsi (fa)")]),a("li",[s._v("Thai (th)")]),a("li",[s._v("Indonesian (id)")]),a("li",[s._v("Bulgarian (bg)")]),a("li",[s._v("Polish (pl)")]),a("li",[s._v("Finnish (fi)")]),a("li",[s._v("Swedish (sv-SE)")]),a("li",[s._v("Greek (el)")]),a("li",[s._v("Slovak (sk)")]),a("li",[s._v("Catalunya (ca)")]),a("li",[s._v("Czech (cz)")]),a("li",[s._v("Ukrainian (ua)")]),a("li",[s._v("Turkmen (tk)")]),a("li",[s._v("Tamil (ta)")]),a("li",[s._v("Latvian (lv)")]),a("li",[s._v("Afrikaans (af-ZA)")]),a("li",[s._v("Estonian (ee)")]),a("li",[s._v("Slovenian (sl)")]),a("li",[s._v("Arabic (ar)")]),a("li",[s._v("Hebrew (he)")])]),a("p",[s._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},[s._v("here")]),s._v(" and create a pull request.")])])}]}},function(s,t,a){s.exports=a(503)},function(s,t,a){function l(s){a(504)}var n=a(13)(a(506),a(507),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(505);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("7ee9a3aa",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.icon-list li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.demo-icon .source>i{color:#8492a6;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:24px;margin-bottom:15px;color:#8492a6}.icon-list li:hover{color:#5cb6ff}',""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(241);t.default={data:function(){return{icons:l}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element provides a set of common icons.")]),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("i",{staticClass:"el-icon-edit"}),a("i",{staticClass:"el-icon-share"}),a("i",{staticClass:"el-icon-delete"}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("Search")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",{key:t},[a("span",[a("i",{class:"el-icon-"+t}),s._v("\n "+s._s("el-icon-"+t)+"\n ")])])})),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),a("p",[s._v("Now you can use them as you do with Element built-in icons. For example, in el-input:")]),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Just assign the class name to "),a("code",[s._v("el-icon-iconName")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"third-party-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#third-party-icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Third-party icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Some of Element's components has an "),a("code",[s._v("icon")]),s._v(" attribute, e.g. Input. If you want to use a third-party icon in the "),a("code",[s._v("icon")]),s._v(" attribute, here's what you need to do:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("span",[s._v("1.")]),s._v(" Modify the class name prefix of the third-party library\n")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Please read third-party icon library documentation on how to do it. For example, if you're using "),a("a",{attrs:{href:"http://iconfont.cn/"}},[s._v("iconfont.cn")]),s._v(', you can find prefix editor in the "Edit Project" dialog. If you\'re using '),a("a",{attrs:{href:"http://fontawesome.io/"}},[s._v("Font Awesome")]),s._v(", you can refer to "),a("a",{attrs:{href:"https://github.com/ElementUI/element-font-awesome"}},[s._v("this demo")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("span",[s._v("2.")]),s._v(" Add some CSS:\n")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-attr"},[s._v('[class^="el-icon-my"]')]),s._v(", "),a("span",{staticClass:"hljs-selector-attr"},[s._v('[class*=" el-icon-my"]')]),s._v(" {\n"),a("span",{staticClass:"hljs-attribute"},[s._v("font-family")]),s._v(":"),a("span",{staticClass:"hljs-string"},[s._v('"your-font-family"')]),s._v(" "),a("span",{staticClass:"hljs-meta"},[s._v("!important")]),s._v(";\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("/* The following is based on original CSS rules of third-party library */")]),s._v("\n"),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": inherit;\n"),a("span",{staticClass:"hljs-attribute"},[s._v("font-style")]),s._v(":normal;\n"),a("span",{staticClass:"hljs-attribute"},[s._v("-webkit-font-smoothing")]),s._v(": antialiased;\n"),a("span",{staticClass:"hljs-attribute"},[s._v("-moz-osx-font-smoothing")]),s._v(": grayscale;\n}\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-xxx"')]),s._v(" />")]),s._v("\n")])])}]}},function(s,t,a){s.exports=a(509)},function(s,t,a){function l(s){a(510)}var n=a(13)(a(512),a(513),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(511);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("077ca5d8",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-input-number .el-input-number+.el-input-number{margin-left:10px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input numerical values with a customizable range.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num1: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value)\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{min:1,max:10},on:{change:s.handleChange},model:{value:s.num1,callback:function(t){s.num1=t},expression:"num1"}})]],2),a("p",[s._v("Bind a variable to "),a("code",[s._v("v-model")]),s._v(" in "),a("code",[s._v("")]),s._v(" element and you are set.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value)\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(t){s.num2=t},expression:"num2"}})]],2),a("p",[s._v("The "),a("code",[s._v("disabled")]),s._v(" attribute accepts a "),a("code",[s._v("boolean")]),s._v(", and if the value is "),a("code",[s._v("true")]),s._v(", the component is disabled. If you just need to control the value within a range, you can add "),a("code",[s._v("min")]),s._v(" attribute to set the minimum value and "),a("code",[s._v("max")]),s._v(" to set the maximum value. By default, the minimum value is "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Allows you to define incremental steps.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num3: 5\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(t){s.num3=t},expression:"num3"}})]],2),a("p",[s._v("Add "),a("code",[s._v("step")]),s._v(" attribute to set the step.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num4: 1,\n num5: 1,\n num6: 1,\n num7: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",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",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num5"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num7"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("num6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("num7")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num8: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:s.handleChange},model:{value:s.num8,callback:function(t){s.num8=t},expression:"num8"}})]],2),a("p",[s._v("Set "),a("code",[s._v("controls-position")]),s._v(" to decide the position of control buttons.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("controls-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num8")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[s._v("¶")]),s._v(" Size")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("medium")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"controls-position"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#controls-position","aria-hidden":"true"}},[s._v("¶")]),s._v(" Controls Position")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("the minimum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("the maximum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[a("code",[s._v("Infinity")])])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("incremental step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the component")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the component is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("whether to enable the control buttons")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("controls-position")]),a("td",[s._v("position of the control buttons")]),a("td",[s._v("string")]),a("td",[s._v("right")]),a("td",[s._v("-")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes")]),a("td",[s._v("value after change")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("-")])])])])}]}},function(s,t,a){s.exports=a(515)},function(s,t,a){function l(s){a(516)}var n=a(13)(a(518),a(519),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(517);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("50a10224",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-input.demo-en-US .el-select .el-input{width:130px}.demo-input.demo-en-US .el-input{width:180px}.demo-input.demo-en-US .el-textarea{width:414px}.demo-input.demo-en-US .el-input-group{width:100%}.demo-input.demo-en-US .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-en-US .demo-input-suffix{padding:10px}.demo-input.demo-en-US .demo-input-suffix .el-input{margin-right:15px}.demo-input.demo-en-US .demo-input-label{display:inline-block;width:130px}.demo-input.demo-en-US .demo-autocomplete{text-align:center}.demo-input.demo-en-US .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-en-US .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-en-US .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}",""]); -},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{links:[],input:"",input1:"",input2:"",input21:"",input22:"",input23:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearch:function(s,t){var a=this.links,l=s?a.filter(this.createStateFilter(s)):a;t(l)},querySearchAsync:function(s,t){var a=this.links,l=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(l)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input data using mouse or keyboard.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\nexport default {\n data() {\n return {\n input: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input,callback:function(t){s.input=t},expression:"input"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input1: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:s.input1,callback:function(t){s.input1=t},expression:"input1"}})],1),a("p",[s._v("Disable the Input with the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add an icon to indicate input type.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Using attributes\n \n \n \n \n
    \n
    \n Using slots\n \n \n \n \n \n \n
    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input2: '',\n input21: '',\n input22: '',\n input23: ''\n }\n }\n}\n",style:"\n .demo-input-label {\n display: inline-block;\n width: 130px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[s._v("Using attributes")]),a("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:s.input2,callback:function(t){s.input2=t},expression:"input2"}}),a("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:s.input21,callback:function(t){s.input21=t},expression:"input21"}})],1),a("div",{staticClass:"demo-input-suffix"},[a("span",{staticClass:"demo-input-label"},[s._v("Using slots")]),a("el-input",{attrs:{placeholder:"Pick a date"},model:{value:s.input22,callback:function(t){s.input22=t},expression:"input22"}},[a("i",{staticClass:"el-input__icon el-icon-date",slot:"suffix"})]),a("el-input",{attrs:{placeholder:"Type something"},model:{value:s.input23,callback:function(t){s.input23=t},expression:"input23"}},[a("i",{staticClass:"el-input__icon el-icon-search",slot:"prefix"})])],1)]),a("p",[s._v("To add icons in Input, you can simply use "),a("code",[s._v("prefix-icon")]),s._v(" and "),a("code",[s._v("suffix-icon")]),s._v(" attributes. Also, the "),a("code",[s._v("prefix")]),s._v(" and "),a("code",[s._v("suffix")]),s._v(" named slots works as well.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-label"')]),s._v(">")]),s._v("Using attributes"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("suffix-icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Type something"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prefix-icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-search"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input21"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-suffix"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-label"')]),s._v(">")]),s._v("Using slots"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input22"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"suffix"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-input__icon el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Type something"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input23"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prefix"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-input__icon el-icon-search"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".demo-input-label")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": inline-block;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("130px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input21")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input22")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input23")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:s.textarea,callback:function(t){s.textarea=t},expression:"textarea"}})],1),a("p",[s._v("Control the height by setting the "),a("code",[s._v("rows")]),s._v(" prop.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":rows")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("textarea")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n
    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea2: '',\n textarea3: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:s.textarea2,callback:function(t){s.textarea2=t},expression:"textarea2"}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:s.textarea3,callback:function(t){s.textarea3=t},expression:"textarea3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("autosize")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":autosize")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("textarea2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("textarea3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Prepend or append an element, generally a label or a button.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n \n
    \n\n\n\n',script:"\nexport default {\n data() {\n return {\n input3: '',\n input4: '',\n input5: '',\n select: ''\n }\n }\n}\n",style:"\n .el-select .el-input {\n width: 110px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input3,callback:function(t){s.input3=t},expression:"input3"}},[a("template",{slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input4,callback:function(t){s.input4=t},expression:"input4"}},[a("template",{slot:"append"},[s._v(".com")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input5,callback:function(t){s.input5=t},expression:"input5"}},[a("el-select",{attrs:{placeholder:"Select"},slot:"prepend",model:{value:s.select,callback:function(t){s.select=t},expression:"select"}},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),a("el-option",{attrs:{label:"Order No.",value:"2"}}),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),a("el-button",{attrs:{icon:"search"},slot:"append"})],1)],1)]),a("p",[s._v("Use "),a("code",[s._v("slot")]),s._v(" to distribute elements that prepend or append to Input.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(">")]),s._v(".com"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input5"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"select"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Restaurant"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Order No."')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tel"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-select")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-input")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("110px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("select")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n \n \n \n \n \n
    \n\n\n',script:"\nexport default {\n data() {\n return {\n input6: '',\n input7: '',\n input8: '',\n input9: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{placeholder:"Please Input"},model:{value:s.input6,callback:function(t){s.input6=t},expression:"input6"}}),a("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:s.input7,callback:function(t){s.input7=t},expression:"input7"}}),a("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:s.input8,callback:function(t){s.input8=t},expression:"input8"}}),a("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:s.input9,callback:function(t){s.input9=t},expression:"input9"}})],1)]),a("p",[s._v("Add "),a("code",[s._v("size")]),s._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" and "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string" -},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input6"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input7"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input8"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input9"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input9")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("You can get some recommended tips based on the current input.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    list suggestions when activated
    \n \n     \n \n
    list suggestions on input
    \n \n     \n    \n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state1: \'\',\n state2: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n // call callback function to return suggestions\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions when activated")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input"},on:{select:s.handleSelect},model:{value:s.state1,callback:function(t){s.state1=t},expression:"state1"}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions on input")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:s.handleSelect},model:{value:s.state2,callback:function(t){s.state2=t},expression:"state2"}})],1)],1)],1),a("p",[s._v("Autocomplete component provides input suggestions. The "),a("code",[s._v("fetch-suggestions")]),s._v(" attribute is a method that returns suggested input. In this example, "),a("code",[s._v("querySearch(queryString, cb)")]),s._v(" returns suggestions to Autocomplete via "),a("code",[s._v("cb(data)")]),s._v(" when suggestions are ready.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions when activated"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions on input"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":trigger-on-focus")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("state1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n "),a("span",{staticClass:"hljs-comment"},[s._v("// call callback function to return suggestions")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("Customize how suggestions are displayed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n\n\n\n\n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state3: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var links = this.links;\n var results = queryString ? link.filter(this.createFilter(queryString)) : links;\n // call callback function to return suggestion objects\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n },\n handleIconClick(ev) {\n console.log(ev);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n',style:"\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,placeholder:"Please input",icon:"edit","on-icon-click":s.handleIconClick},on:{select:s.handleSelect},scopedSlots:s._u([["default",function(t){return[a("div",{staticClass:"value"},[s._v(s._s(t.item.value))]),a("span",{staticClass:"link"},[s._v(s._s(t.item.link))])]}]]),model:{value:s.state3,callback:function(t){s.state3=t},expression:"state3"}})],1),a("p",[s._v("Use "),a("code",[s._v("scoped slot")]),s._v(" to customize suggestion items. In the scope, you can access the suggestion object via the "),a("code",[s._v("item")]),s._v(" key.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("popper-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-autocomplete"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.item.value "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.item.link "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("state3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? link.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n "),a("span",{staticClass:"hljs-comment"},[s._v("// call callback function to return suggestion objects")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n },\n handleIconClick(ev) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n }\n },\n mounted() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Search data from server-side.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state4: \'\',\n timeout: null\n };\n },\n methods: {\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n querySearchAsync(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n cb(results);\n }, 3000 * Math.random());\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n };\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"Please input"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(t){s.state4=t},expression:"state4"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearchAsync"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("state4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("timeout")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n loadAll() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n querySearchAsync(queryString, cb) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{ -staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n\n clearTimeout("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout);\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n cb(results);\n }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(" * "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random());\n },\n createFilter(queryString) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n };\n },\n handleSelect(item) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Resizable for entering multiple lines of text information. Add attribute "),a("code",[s._v('type="textarea"')]),s._v(" to change "),a("code",[s._v("input")]),s._v(" into native "),a("code",[s._v("textarea")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autosize-textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autosize Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Setting the "),a("code",[s._v("autosize")]),s._v(" prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to "),a("code",[s._v("autosize")]),s._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mixed-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Mixed input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("Same as the "),a("code",[s._v("type")]),s._v(" attribute of native input, except that it can be "),a("code",[s._v("textarea")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("maximum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("minimum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder of Input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Input is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input, works when "),a("code",[s._v("type")]),s._v(" is not 'textarea'")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prefix-icon")]),a("td",[s._v("prefix icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("suffix-icon")]),a("td",[s._v("suffix icon class")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("number of rows of textarea, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("whether textarea has an adaptive height, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean/object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("same as "),a("code",[s._v("auto-complete")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("on/off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("same as "),a("code",[s._v("readonly")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("same as "),a("code",[s._v("max")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("same as "),a("code",[s._v("min")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("same as "),a("code",[s._v("step")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("control the resizability")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as "),a("code",[s._v("autofocus")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("same as "),a("code",[s._v("form")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("prefix")]),a("td",[s._v("content as Input prefix")])]),a("tr",[a("td",[s._v("suffix")]),a("td",[s._v("content as Input suffix")])]),a("tr",[a("td",[s._v("prepend")]),a("td",[s._v("content to prepend before Input")])]),a("tr",[a("td",[s._v("append")]),a("td",[s._v("content to append after Input")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the icon inside Input value change")]),a("td",[s._v("(value: string | number)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("the placeholder of Autocomplete")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Autocomplete is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fetch-suggestions")]),a("td",[s._v("a method to fetch input suggestions. When suggestions are ready, invoke "),a("code",[s._v("callback(data:[])")]),s._v(" to return them to Autocomplete")]),a("td",[s._v("Function(queryString, callback)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for autocomplete's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("trigger-on-focus")]),a("td",[s._v("whether show suggestions when input focus")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("select-when-unmatched")]),a("td",[s._v("whether to emit a "),a("code",[s._v("select")]),s._v(" event on enter when there is no autocomplete match")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of option object is used as the option's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("specify which key of option object is used as the option's value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when a suggestion is clicked")]),a("td",[s._v("suggestion being clicked")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("-")])])])])}]}},function(s,t,a){s.exports=a(521)},function(s,t,a){var l=a(13)(null,a(522),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"installation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Installation")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm")]),a("p",[s._v("Installing with npm is recommended and it works seamlessly with "),a("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(".")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-ui@next -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),a("p",[s._v("Get the latest version from "),a("a",{attrs:{href:"https://unpkg.com/element-ui@next/"}},[s._v("unpkg.com/element-ui")]),s._v(" , and import JavaScript and CSS file in your page.")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@next/lib/theme-chalk/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@next/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),a("p",[s._v("If you are using CDN, a hello-world page is easy with Element. "),a("a",{attrs:{href:"https://jsfiddle.net/leopoldthecuber/hzfpyvg6/1/"}},[s._v("Online Demo")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-meta"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("meta")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("charset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@next/lib/theme-chalk/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"app"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible = true"')]),s._v(">")]),s._v("Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Try Element"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@next/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n el: "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n data: "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" ")]),s._v("{\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }\n }\n })\n ")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])]),a("p",[s._v("If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.")])])}]}},function(s,t,a){s.exports=a(524)},function(s,t,a){function l(s){a(525)}var n=a(13)(null,a(527),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(526);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("9ac4e856",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Quickly and easily create layouts with the basic 24-column.")]),s._m(1),a("p",[s._v("Create basic grid layout using columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n    \n\n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("With "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("col")]),s._v(", we can easily manipulate the layout using the "),a("code",[s._v("span")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{ -staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Column spacing is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row provides "),a("code",[s._v("gutter")]),s._v(" attribute to specify spacings between columns, and its default value is 0.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can specify column offsets.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n    \n\n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can specify the number of column offset by setting the value of "),a("code",[s._v("offset")]),s._v(" attribute of Col.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name" -},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use the flex layout to make flexible alignment of columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can enable flex layout by setting "),a("code",[s._v("type")]),s._v(" attribute to 'flex', and define the layout of child elements by setting "),a("code",[s._v("justify")]),s._v(" attribute with start, center, end, space-between or space-around.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"center"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-between"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-around"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,style:"\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-col")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-dark")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-light")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e5e9f2")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".grid-content")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-spacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column spacing")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hybrid-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hybrid layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"responsive-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Responsive Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("grid spacing")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("layout mode, you can use flex, works in modern browsers")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("horizontal alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("vertical alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("custom element tag")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("number of column the grid spans")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("24")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("number of spacing on the left side of the grid")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("number of columns that grid moves to the right")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("number of columns that grid moves to the left")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",[s._v("<768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",[s._v("≥768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",[s._v("≥992")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",[s._v("≥1200")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("custom element tag")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])]); -}]}},function(s,t,a){s.exports=a(529)},function(s,t,a){function l(s){a(530)}var n=a(13)(a(532),a(533),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(531);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("59d2c818",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-loading .el-table{border:none}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Show animation while loading data.")]),s._m(1),a("p",[s._v("Displays animation in a container (such as a table) while loading data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading: true\n };\n }\n };\n",style:"\n body {\n margin: 0;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),a("code",[s._v("v-loading")]),s._v(", you just need to bind a "),a("code",[s._v("boolean")]),s._v(" value to it. By default, the loading mask will append to the element where the directive is used. Adding the "),a("code",[s._v("body")]),s._v(" modifier makes the mask append to the body element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-tag"},[s._v("body")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize a text message.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Add attribute "),a("code",[s._v("element-loading-text")]),s._v(" to the element on which "),a("code",[s._v("v-loading")]),s._v(" is bound, and its value will be displayed under the spinner.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("element-loading-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Loading..."')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("loading2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Show a full screen animation while loading data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n fullscreenLoading: false\n }\n },\n methods: {\n openFullScreen() {\n this.fullscreenLoading = true;\n setTimeout(() => {\n this.fullscreenLoading = false;\n }, 3000);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:s.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:s.openFullScreen}},[s._v("\n Full screen loading for 3 seconds\n ")])]],2),a("p",[s._v("Add the "),a("code",[s._v("fullscreen")]),s._v(" modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier "),a("code",[s._v("lock")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openFullScreen"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n Full screen loading for 3 seconds\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreenLoading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n openFullScreen() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can also invoke Loading with a service. Import Loading service:")]),s._m(5),a("p",[s._v("Invoke it:")]),s._m(6),s._m(7),s._m(8),a("p",[s._v("Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-inside-a-container"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading inside a container")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"full-screen-loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Full screen loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"service"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[s._v("¶")]),s._v(" Service")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Loading } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The parameter "),a("code",[s._v("options")]),s._v(" is the configuration of Loading, and its details can be found in the following table. "),a("code",[s._v("LoadingService")]),s._v(" returns a Loading instance, and you can close it by invoking its "),a("code",[s._v("close")]),s._v(" method:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Calling the "),a("code",[s._v("close")]),s._v(" method on any one of them can close this full screen Loading.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is imported entirely, a globally method "),a("code",[s._v("$loading")]),s._v(" will be registered to Vue.prototype. You can invoke it like this: "),a("code",[s._v("this.$loading(options)")]),s._v(", and it also returns a Loading instance.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._v("the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to "),a("code",[s._v("document.querySelector")]),s._v(" to get the corresponding DOM node")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("same as the "),a("code",[s._v("body")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("same as the "),a("code",[s._v("fullscreen")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("same as the "),a("code",[s._v("lock")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("loading text that displays under the spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Loading")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(535)},function(s,t,a){function l(s){a(536)}var n=a(13)(a(538),a(539),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(537);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("5aabbf1a",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){"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){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Menu that provides navigation for your website.")]),s._m(1),a("p",[s._v("Top bar NavMenu can be used in a variety of scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Processing Center\n \n \n item one\n item two\n item three\n \n Orders\n\n
    \n\n Processing Center\n \n \n item one\n item two\n item three\n \n Orders\n\n\n\n',script:"\n export default {\n data() {\n return {\n activeIndex: '1',\n activeIndex2: '1'\n };\n },\n methods: {\n handleSelect(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1)],1),a("p",[s._v("By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides "),a("code",[s._v("background-color")]),s._v(", "),a("code",[s._v("text-color")]),s._v(" and "),a("code",[s._v("active-text-color")]),s._v(" to customize the colors.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{ -staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("background-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#545c64"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#fff"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("active-text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleSelect(key, keyPath) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Vertical NavMenu with sub-menus.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Default colors
    \n \n \n \n \n item one\n item one\n \n \n item three\n \n \n \n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n \n     \n \n
    Custom colors
    \n \n \n \n \n item one\n item one\n \n \n item three\n \n \n \n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n \n     \n    \n\n\n',script:"\n export default {\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:12}},[a("h5",[s._v("Default colors")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),a("span",[s._v("Navigator One")])]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",[s._v("Navigator Two")])]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),a("span",[s._v("Navigator Three")])])],1)],1),a("el-col",{attrs:{span:12}},[a("h5",[s._v("Custom colors")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),a("span",[s._v("Navigator One")])]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",[s._v("Navigator Two")])]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),a("span",[s._v("Navigator Three")])])],1)],1)],1)],1),a("p",[s._v("You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tac"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("Default colors"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("Custom colors"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("background-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#545c64"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#fff"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("active-text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ffd04b"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Vertical NavMenu could be collapsed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n expand\n collapse\n\n\n \n \n \n Group One\n item one\n item two\n \n \n item three\n \n \n item four\n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n\n\n\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",slot:"source"},[a("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:s.isCollapse,callback:function(t){s.isCollapse=t},expression:"isCollapse"}},[a("el-radio-button",{attrs:{label:!1}},[s._v("expand")]),a("el-radio-button",{attrs:{label:!0}},[s._v("collapse")])],1),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:s.isCollapse},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),a("span",{slot:"title"},[s._v("Navigator One")])]),a("el-menu-item-group",[a("span",{slot:"title"},[s._v("Group One")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("span",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],1)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",{slot:"title"},[s._v("Navigator Two")])]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),a("span",{slot:"title"},[s._v("Navigator Three")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isCollapse"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("expand"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("collapse"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":collapse")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isCollapse"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Group One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-menu-vertical-demo")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":not(.el-menu--collapse)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("400px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("isCollapse")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"top-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Top bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"side-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Side bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("menu display mode")]),a("td",[s._v("string")]),a("td",[s._v("horizontal/vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("collapse")]),a("td",[s._v("whether the menu is collapsed (available only in vertical mode)")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("background-color")]),a("td",[s._v("background color of Menu (hex format)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("text color of Menu (hex format)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#2d2f33")])]),a("tr",[a("td",[s._v("active-text-color")]),a("td",[s._v("text color of currently active menu item (hex format)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])]),a("tr",[a("td",[s._v("theme")]),a("td",[s._v("theme color")]),a("td",[s._v("string")]),a("td",[s._v("light/dark")]),a("td",[s._v("light")])]),a("tr",[a("td",[s._v("default-active")]),a("td",[s._v("index of currently active menu")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-openeds")]),a("td",[s._v("array that contains keys of currently active sub-menus")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unique-opened")]),a("td",[s._v("whether only one sub-menu can be active")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-trigger")]),a("td",[s._v("how sub-menus are triggered, only works when "),a("code",[s._v("mode")]),s._v(" is 'horizontal'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("router")]),a("td",[s._v("whether "),a("code",[s._v("vue-router")]),s._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("callback function when menu is activated")]),a("td",[s._v("index: index of activated menu, indexPath: index path of activated menu")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("callback function when sub-menu expands")]),a("td",[s._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("callback function when sub-menu collapses")]),a("td",[s._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("callback function when menu-item is clicked")]),a("td",[s._v("el: menu-item instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"submenu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("route")]),a("td",[s._v("Vue Router object")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-group-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("group title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(541)},function(s,t,a){var l=a(13)(a(542),a(543),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{open:function(){var s=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"Delete completed",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"Delete canceled",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("Please input your email","Tips",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"Your email is:"+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"Input canceled"})},200)})},open4:function(){var s=this,t=this.$createElement;this.$msgbox({title:"Message",message:t("p",null,[t("span",null,"Message can be "),t("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(s,t,a){"confirm"===s?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})},open5:function(){this.$alert("This is HTML string","HTML String",{dangerouslyUseHTMLString:!0})},open6:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){s.$message({type:"success",message:"Delete completed"})}).catch(function(){s.$message({type:"info",message:"Delete canceled"})})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.")]),s._m(1),s._m(2),a("p",[s._v("Alert interrupts user operation until the user confirms.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$alert('This is a message', 'Title', {\n confirmButtonText: 'OK',\n callback: action => {\n this.$message({\n type: 'info',\n message: `action: ${ action }`\n });\n }\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Open an alert by calling the "),a("code",[s._v("$alert")]),s._v(" method. It simulates the system's "),a("code",[s._v("alert")]),s._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),a("code",[s._v("message")]),s._v(" and "),a("code",[s._v("title")]),s._v(" are received. It is worth mentioning that when the box is closed, it returns a "),a("code",[s._v("Promise")]),s._v(" object for further processing. If you are not sure if your target browsers support "),a("code",[s._v("Promise")]),s._v(", you should import a third party polyfill or use callbacks instead like this example.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$alert("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Title'")]),s._v(", {\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("callback")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`action: "),a("span",{staticClass:"hljs-subst"},[s._v("${ action }")]),s._v("`")]),s._v("\n });\n }\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Confirm is used to ask users' confirmation.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open2() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning'\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n }); \n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$confirm")]),s._v(" method to open a confirm, and it simulates the system's "),a("code",[s._v("confirm")]),s._v(". We can also highly customize Message Box by passing a third attribute "),a("code",[s._v("options")]),s._v(" which is a literal object. The attribute "),a("code",[s._v("type")]),s._v(" indicates the message type, and it's value can be "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("error")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("warning")]),s._v(". Note that the second attribute "),a("code",[s._v("title")]),s._v(" must be a "),a("code",[s._v("string")]),s._v(", and if it is an "),a("code",[s._v("object")]),s._v(", it will be handled as the attribute "),a("code",[s._v("options")]),s._v(". Here we use "),a("code",[s._v("Promise")]),s._v(" to handle further processing.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open2() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(", {\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Delete completed'")]),s._v("\n });\n }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Delete canceled'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Prompt is used when user input is required.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$prompt('Please input your e-mail', 'Tip', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n inputErrorMessage: 'Invalid Email'\n }).then(value => {\n this.$message({\n type: 'success',\n message: 'Your email is:' + value\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Input canceled'\n }); \n });\n }\n }\n }\n", -style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$prompt")]),s._v(" method to open a prompt, and it simulates the system's "),a("code",[s._v("prompt")]),s._v(". You can use "),a("code",[s._v("inputPattern")]),s._v(" parameter to specify your own RegExp pattern. Use "),a("code",[s._v("inputValidator")]),s._v(" to specify validation method, and it should return "),a("code",[s._v("Boolean")]),s._v(" or "),a("code",[s._v("String")]),s._v(". Returning "),a("code",[s._v("false")]),s._v(" or "),a("code",[s._v("String")]),s._v(" means the validation has failed, and the string returned will be used as the "),a("code",[s._v("inputErrorMessage")]),s._v(". In addition, you can customize the placeholder of the input box with "),a("code",[s._v("inputPlaceholder")]),s._v(" parameter.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open3() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$prompt("),a("span",{staticClass:"hljs-string"},[s._v("'Please input your e-mail'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tip'")]),s._v(", {\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("inputPattern")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("inputErrorMessage")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Invalid Email'")]),s._v("\n }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("value")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Your email is:'")]),s._v(" + value\n });\n }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input canceled'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Can be customized to show various content.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open4() {\n const h = this.$createElement;\n this.$msgbox({\n title: 'Message',\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ]),\n showCancelButton: true,\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n beforeClose: (action, instance, done) => {\n if (action === 'confirm') {\n instance.confirmButtonLoading = true;\n instance.confirmButtonText = 'Loading...';\n setTimeout(() => {\n done();\n setTimeout(() => {\n instance.confirmButtonLoading = false;\n }, 300);\n }, 3000);\n } else {\n done();\n }\n }\n }).then(action => {\n this.$message({\n type: 'info',\n message: 'action: ' + action\n });\n });\n },\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("The three methods mentioned above are repackagings of the "),a("code",[s._v("$msgbox")]),s._v(" method. This example calls "),a("code",[s._v("$msgbox")]),s._v(" method directly using the "),a("code",[s._v("showCancelButton")]),s._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),a("code",[s._v("cancelButtonClass")]),s._v(" to add a custom style and "),a("code",[s._v("cancelButtonText")]),s._v(" to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the "),a("code",[s._v("beforeClose")]),s._v(" attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: "),a("code",[s._v("action")]),s._v(", "),a("code",[s._v("instance")]),s._v(" and "),a("code",[s._v("done")]),s._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),a("code",[s._v("loading")]),s._v(" for confirm button; you can invoke the "),a("code",[s._v("done")]),s._v(" method to close the MessageBox instance (if "),a("code",[s._v("done")]),s._v(" is not called inside "),a("code",[s._v("beforeClose")]),s._v(", the instance will not be closed).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open4() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$msgbox({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(", [\n h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Message can be '")]),s._v("),\n h("),a("span",{staticClass:"hljs-string"},[s._v("'i'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: teal'")]),s._v(" }, "),a("span",{staticClass:"hljs-string"},[s._v("'VNode'")]),s._v(")\n ]),\n "),a("span",{staticClass:"hljs-attr"},[s._v("showCancelButton")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("beforeClose")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'confirm'")]),s._v(") {\n instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n instance.confirmButtonText = "),a("span",{staticClass:"hljs-string"},[s._v("'Loading...'")]),s._v(";\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n done();\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n done();\n }\n }\n }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'action: '")]),s._v(" + action\n });\n });\n },\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$alert('This is HTML string', 'HTML String', {\n dangerouslyUseHTMLString: true\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open5}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Set "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" to true and "),a("code",[s._v("message")]),s._v(" will be treated as an HTML string.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open5() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$alert("),a("span",{staticClass:"hljs-string"},[s._v("'This is HTML string'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'HTML String'")]),s._v(", {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),a("p",[s._v("Content of MessageBox can be centered.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open6() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning',\n center: true\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n });\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open6}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Setting "),a("code",[s._v("center")]),s._v(" to "),a("code",[s._v("true")]),s._v(" will center the content")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open6() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(", {\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("center")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Delete completed'")]),s._v("\n });\n }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Delete canceled'")]),s._v("\n });\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("By design MessageBox provides simulations of system's "),a("code",[s._v("alert")]),s._v(", "),a("code",[s._v("confirm")]),s._v(" and "),a("code",[s._v("prompt")]),s._v("，so it's content should be simple. For more complicated contents, please use Dialog.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"confirm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[s._v("¶")]),s._v(" Confirm")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prompt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prompt")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customization")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"use-html-string"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use HTML String")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("message")]),s._v(" supports HTML string.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("Although "),a("code",[s._v("message")]),s._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",[s._v("message")]),s._v(" to user-provided content.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"centered-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is fully imported, it will add the following global methods for Vue.prototype: "),a("code",[s._v("$msgbox")]),s._v(", "),a("code",[s._v("$alert")]),s._v(", "),a("code",[s._v("$confirm")]),s._v(" and "),a("code",[s._v("$prompt")]),s._v(". So in a Vue instance you can call "),a("code",[s._v("MessageBox")]),s._v(" like what we did in this page. The parameters are:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",[s._v("$msgbox(options)")])]),a("li",[a("code",[s._v("$alert(message, title, options)")]),s._v(" or "),a("code",[s._v("$alert(message, options)")])]),a("li",[a("code",[s._v("$confirm(message, title, options)")]),s._v(" or "),a("code",[s._v("$confirm(message, options)")])]),a("li",[a("code",[s._v("$prompt(message, title, options)")]),s._v(" or "),a("code",[s._v("$prompt(message, options)")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If you prefer importing "),a("code",[s._v("MessageBox")]),s._v(" on demand:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { MessageBox } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The corresponding methods are: "),a("code",[s._v("MessageBox")]),s._v(", "),a("code",[s._v("MessageBox.alert")]),s._v(", "),a("code",[s._v("MessageBox.confirm")]),s._v(" and "),a("code",[s._v("MessageBox.prompt")]),s._v(". The parameters are the same as above.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("content of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("whether "),a("code",[s._v("message")]),s._v(" is treated as HTML string")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type, used for icon display")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("callback")]),a("td",[s._v("MessageBox closing callback if you don't prefer Promise")]),a("td",[s._v("function(action), where action can be 'confirm' or 'cancel', and "),a("code",[s._v("instance")]),s._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),a("td",[s._v("function(action, instance, done), where "),a("code",[s._v("action")]),s._v(" can be 'confirm' or 'cancel'; "),a("code",[s._v("instance")]),s._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),a("code",[s._v("done")]),s._v(" is for closing the instance")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lockScroll")]),a("td",[s._v("whether to lock body scroll when MessageBox prompts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showCancelButton")]),a("td",[s._v("whether to show a cancel button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with confirm and prompt)")])]),a("tr",[a("td",[s._v("showConfirmButton")]),a("td",[s._v("whether to show a confirm button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("cancelButtonText")]),a("td",[s._v("text content of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Cancel")])]),a("tr",[a("td",[s._v("confirmButtonText")]),a("td",[s._v("text content of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OK")])]),a("tr",[a("td",[s._v("cancelButtonClass")]),a("td",[s._v("custom class name of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("confirmButtonClass")]),a("td",[s._v("custom class name of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closeOnClickModal")]),a("td",[s._v("whether MessageBox can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("closeOnPressEscape")]),a("td",[s._v("whether MessageBox can be closed by pressing the ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("closeOnHashChange")]),a("td",[s._v("whether to close MessageBox when hash changes")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showInput")]),a("td",[s._v("whether to show an input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with prompt)")])]),a("tr",[a("td",[s._v("inputPlaceholder")]),a("td",[s._v("placeholder of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValue")]),a("td",[s._v("initial value of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputPattern")]),a("td",[s._v("regexp for the input")]),a("td",[s._v("regexp")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValidator")]),a("td",[s._v("validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputErrorMessage")]),a("td",[s._v("error message when validation fails")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Illegal input")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to align the content in center")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("roundButton")]),a("td",[s._v("whether to use round button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(545)},function(s,t,a){var l=a(13)(a(546),a(547),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){this.$message("This is a message.")},openVn:function(){var s=this.$createElement;this.$message({message:s("p",null,[s("span",null,"Message can be "),s("i",{style:"color: teal"},"VNode")])})},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")},open5:function(){this.$message({showClose:!0,message:"This is a message."})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})},openCenter:function(){this.$message({message:"Centered text",center:!0})},openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"This is HTML string"})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.")]),s._m(1),a("p",[s._v("Displays at the top, and disappears after 3 seconds.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('This is a message.');\n },\n \n openVn() {\n const h = this.$createElement;\n this.$message({\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ])\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("Show message")]),a("el-button",{attrs:{plain:!0},on:{click:s.openVn}},[s._v("VNode")])]],2),a("p",[s._v("The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a "),a("code",[s._v("$message")]),s._v(" method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.")]),a("div",{ -staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Show message"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openVn"')]),s._v(">")]),s._v("VNode"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v(");\n },\n \n openVn() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(", [\n h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Message can be '")]),s._v("),\n h("),a("span",{staticClass:"hljs-string"},[s._v("'i'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: teal'")]),s._v(" }, "),a("span",{staticClass:"hljs-string"},[s._v("'VNode'")]),s._v(")\n ])\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('This is a message.');\n },\n open2() {\n this.$message({\n message: 'Congrats, this is a success message.',\n type: 'success'\n });\n },\n\n open3() {\n this.$message({\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open4() {\n this.$message.error('Oops, this is a error message.');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("error")])]],2),a("p",[s._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),a("code",[s._v("type")]),s._v(" can define different types, and its default is "),a("code",[s._v("info")]),s._v(". In such cases the main body is passed in as the value of "),a("code",[s._v("message")]),s._v(". Also, we have registered methods for different types, so you can directly call it without passing a type like "),a("code",[s._v("open4")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("message"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("error"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v(");\n },\n open2() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n });\n },\n\n open3() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n });\n },\n\n open4() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Oops, this is a error message.'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("A close button can be added.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$message({\n showClose: true,\n message: 'This is a message.'\n });\n },\n\n open6() {\n this.$message({\n showClose: true,\n message: 'Congrats, this is a success message.',\n type: 'success'\n });\n },\n\n open7() {\n this.$message({\n showClose: true,\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open8() {\n this.$message({\n showClose: true,\n message: 'Oops, this is a error message.',\n type: 'error'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("error")])]],2),a("p",[s._v("A default Message cannot be closed manually. If you need a closable message, you can set "),a("code",[s._v("showClose")]),s._v(" field. Besides, same as notification, message has a controllable "),a("code",[s._v("duration")]),s._v(". Default duration is 3000 ms, and it won't disappear when set to "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("message"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open8"')]),s._v(">")]),s._v("error"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open5() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v("\n });\n },\n\n open6() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n });\n },\n\n open7() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n });\n },\n\n open8() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Oops, this is a error message.'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'error'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n openCenter() {\n this.$message({\n message: 'Centered text',\n center: true\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.openCenter}},[s._v("Centered text")])]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openCenter"')]),s._v(">")]),s._v("Centered text"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n openCenter() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Centered text'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("center")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n openHTML() {\n this.$message({\n dangerouslyUseHTMLString: true,\n message: 'This is HTML string'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.openHTML}},[s._v("Use HTML String")])]],2),a("p",[s._v("Set "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" to true and "),a("code",[s._v("message")]),s._v(" will be treated as an HTML string.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openHTML"')]),s._v(">")]),s._v("Use HTML String"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n openHTML() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is HTML string'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"closable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Closable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"centered-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Centered text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use the "),a("code",[s._v("center")]),s._v(" attribute to center the text.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"use-html-string"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use HTML string")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("message")]),s._v(" supports HTML string.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("Although "),a("code",[s._v("message")]),s._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",[s._v("message")]),s._v(" to user-provided content.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$message")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Message")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Message")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Message } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Message(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Message.success(options)")]),s._v(".\nYou can call "),a("code",[s._v("Message.closeAll()")]),s._v(" to manually close all the instances.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("message text")]),a("td",[s._v("string / VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class, overrides "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Message")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("whether to center the text")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed with the message instance as the parameter")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Message")]),s._v(" and "),a("code",[s._v("this.$message")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Message")])])])])}]}},function(s,t,a){s.exports=a(549)},function(s,t,a){var l=a(13)(a(550),a(551),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"Title",message:s("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})},open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})},open7:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open8:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open9:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open10:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})},open11:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})},open12:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"This is HTML string"})},open13:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})},onClose:function(){console.log("Notification is closed")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays a global notification message at a corner of the page.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open() {\n const h = this.$createElement;\n\n this.$notify({\n title: 'Title',\n message: h('i', { style: 'color: teal' }, 'This is a reminder')\n });\n },\n\n open2() {\n this.$notify({\n title: 'Prompt',\n message: 'This is a message that does not automatically close',\n duration: 0\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n Closes automatically\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n Won't close automatically\n ")])]],2),a("p",[s._v("Element has registered the "),a("code",[s._v("$notify")]),s._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),a("code",[s._v("title")]),s._v(" field and the"),a("code",[s._v("message")]),s._v(" field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting "),a("code",[s._v("duration")]),s._v(" you can control its duration. Specifically, if set to "),a("code",[s._v("0")]),s._v(", it will not close automatically. Note that "),a("code",[s._v("duration")]),s._v(" receives a "),a("code",[s._v("Number")]),s._v(" in milliseconds.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("\n Closes automatically\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("\n Won't close automatically\n "),a("span",{ -staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Title'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'i'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: teal'")]),s._v(" }, "),a("span",{staticClass:"hljs-string"},[s._v("'This is a reminder'")]),s._v(")\n });\n },\n\n open2() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Prompt'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message that does not automatically close'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("duration")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("We provide four types: success, warning, info and error.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$notify({\n title: 'Success',\n message: 'This is a success message',\n type: 'success'\n });\n },\n\n open4() {\n this.$notify({\n title: 'Warning',\n message: 'This is a warning message',\n type: 'warning'\n });\n },\n\n open5() {\n this.$notify.info({\n title: 'Info',\n message: 'This is an info message'\n });\n },\n\n open6() {\n this.$notify.error({\n title: 'Error',\n message: 'This is an error message'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n Success\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n Warning\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n Info\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n Error\n ")])]],2),a("p",[s._v("Element provides four notification types: "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("warning")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("error")]),s._v(". They are set by the "),a("code",[s._v("type")]),s._v(" field, and other values will be ignored. We also registered methods for these types that can be invoked directly like "),a("code",[s._v("open5")]),s._v(" and "),a("code",[s._v("open6")]),s._v(" without passing a "),a("code",[s._v("type")]),s._v(" field.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("\n Success\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("\n Warning\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("\n Info\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("\n Error\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open3() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n });\n },\n\n open4() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a warning message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n });\n },\n\n open5() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.info({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an info message'")]),s._v("\n });\n },\n\n open6() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.error({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Error'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an error message'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Notification can emerge from any corner you like.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open7() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top right corner'\n });\n },\n\n open8() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom right corner',\n position: 'bottom-right'\n });\n },\n\n open9() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom left corner',\n position: 'bottom-left'\n });\n },\n\n open10() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top left corner',\n position: 'top-left'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n Top Right\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open8}},[s._v("\n Bottom Right\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open9}},[s._v("\n Bottom Left\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open10}},[s._v("\n Top Left\n ")])]],2),a("p",[s._v("The "),a("code",[s._v("position")]),s._v(" attribute defines which corner Notification slides in. It can be "),a("code",[s._v("top-right")]),s._v(", "),a("code",[s._v("top-left")]),s._v(", "),a("code",[s._v("bottom-right")]),s._v(" or "),a("code",[s._v("bottom-left")]),s._v(". Defaults to "),a("code",[s._v("top-right")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("\n Top Right\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open8"')]),s._v(">")]),s._v("\n Bottom Right\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open9"')]),s._v(">")]),s._v("\n Bottom Left\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open10"')]),s._v(">")]),s._v("\n Top Left\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open7() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'I\\'m at the top right corner'")]),s._v("\n });\n },\n\n open8() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'I\\'m at the bottom right corner'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("position")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'bottom-right'")]),s._v("\n });\n },\n\n open9() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'I\\'m at the bottom left corner'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("position")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'bottom-left'")]),s._v("\n });\n },\n\n open10() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Custom Position'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'I\\'m at the top left corner'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("position")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top-left'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Customize Notification's offset from the edge of the screen.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open11() {\n this.$notify.success({\n title: 'Success',\n message: 'This is a success message',\n offset: 100\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open11}},[s._v("\n Notification with offset\n ")])]],2),a("p",[s._v("Set the "),a("code",[s._v("offset")]),s._v(" attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open11"')]),s._v(">")]),s._v("\n Notification with offset\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open11() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.success({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("offset")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open12() {\n this.$notify({\n title: 'HTML String',\n dangerouslyUseHTMLString: true,\n message: 'This is HTML string'\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open12}},[s._v("\n Use HTML String\n ")])]],2),a("p",[s._v("Set "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" to true and "),a("code",[s._v("message")]),s._v(" will be treated as an HTML string.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open12"')]),s._v(">")]),s._v("\n Use HTML String\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open12() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML String'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("dangerouslyUseHTMLString")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is HTML string'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("p",[s._v("It is possible to hide the close button")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open13() {\n this.$notify.success({\n title: 'Info',\n message: 'This is a message without close button',\n showClose: false\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open13}},[s._v("\n Hide close button\n ")])]],2),a("p",[s._v("Set the "),a("code",[s._v("showClose")]),s._v(" attribute to "),a("code",[s._v("false")]),s._v(" so the notification cannot be closed by the user.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open13"')]),s._v(">")]),s._v("\n Hide close button\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open13() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.success({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message without close button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" With types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-position"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-position","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom position")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" With offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"use-html-string"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use HTML string")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("message")]),s._v(" supports HTML string.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[s._v("Although "),a("code",[s._v("message")]),s._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[s._v("XSS attacks")]),s._v(". So when "),a("code",[s._v("dangerouslyUseHTMLString")]),s._v(" is on, please make sure the content of "),a("code",[s._v("message")]),s._v(" is trusted, and "),a("strong",[s._v("never")]),s._v(" assign "),a("code",[s._v("message")]),s._v(" to user-provided content.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hide-close-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hide-close-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hide close button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$notify")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Notification")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Notification")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Notification(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Notification.success(options)")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("description text")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("dangerouslyUseHTMLString")]),a("td",[s._v("whether "),a("code",[s._v("message")]),s._v(" is treated as HTML string")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("notification type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class. It will be overridden by "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Notification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("duration before close. It will not automatically close if set 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function when notification clicked")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Notification")]),s._v(" and "),a("code",[s._v("this.$notify")]),s._v(" returns the current Notification instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Notification")])])])])}]}},function(s,t,a){s.exports=a(553)},function(s,t,a){function l(s){a(554)}var n=a(13)(a(556),a(557),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(555);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("5c360e98",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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(292);t.default={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+" items per page")},handleCurrentChange:function(s){console.log("current page: "+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,l.addClass)(t,"first"),(0,l.addClass)(a,"last")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If you have too much data to display in one page, use pagination.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n When you have few pages\n \n \n
    \n
    \n When you have more than 7 pages\n \n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have few pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have more than 7 pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("Set "),a("code",[s._v("layout")]),s._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),a("code",[s._v("prev")]),s._v(" (a button navigating to the previous page), "),a("code",[s._v("next")]),s._v(" (a button navigating to the next page), "),a("code",[s._v("pager")]),s._v(" (page list), "),a("code",[s._v("jumper")]),s._v(" (a jump-to input), "),a("code",[s._v("total")]),s._v(" (total item count), "),a("code",[s._v("size")]),s._v(" (a select to determine page size) and "),a("code",[s._v("->")]),s._v("(every element after this symbol will be pulled to the right).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have few pages"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have more than 7 pages"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use small pagination in the case of limited space.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("Just set the "),a("code",[s._v("small")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the Pagination becomes smaller.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("small")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add more modules based on your scenario.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n methods: {\n handleSizeChange(val) {\n console.log(`${val} items per page`);\n },\n handleCurrentChange(val) {\n console.log(`current page: ${val}`);\n }\n },\n data() {\n return {\n currentPage1: 5,\n currentPage2: 5,\n currentPage3: 5,\n currentPage4: 4\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Total item count")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Change page size")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage2=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Jump to")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("All combined")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage4=t}}})],1)]],2),a("p",[s._v("This example is a complete use case. It uses "),a("code",[s._v("size-change")]),s._v(" and "),a("code",[s._v("current-change")]),s._v(" event to handle page size changes and current page changes. "),a("code",[s._v("page-sizes")]),s._v(" accepts an array of integers, each of which represents a different page size in the "),a("code",[s._v("sizes")]),s._v(" select options, e.g. "),a("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Change page size"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sizes, prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Jump to"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next, jumper"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("All combined"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleSizeChange(val) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`"),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v(" items per page`")]),s._v(");\n },\n handleCurrentChange(val) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`current page: "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v("`")]),s._v(");\n }\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"small-pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Small Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-elements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[s._v("¶")]),s._v(" More elements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("whether to use small pagination")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("item count of each page")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("total item count")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("total page count. Set either "),a("code",[s._v("total")]),s._v(" or "),a("code",[s._v("page-count")]),s._v(" and pages will be displayed; if you need "),a("code",[s._v("page-sizes")]),s._v(", "),a("code",[s._v("total")]),s._v(" is required")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("current page number, supports the .sync modifier")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("layout of Pagination, elements separated with a comma")]),a("td",[s._v("string")]),a("td",[a("code",[s._v("sizes")]),s._v(", "),a("code",[s._v("prev")]),s._v(", "),a("code",[s._v("pager")]),s._v(", "),a("code",[s._v("next")]),s._v(", "),a("code",[s._v("jumper")]),s._v(", "),a("code",[s._v("->")]),s._v(", "),a("code",[s._v("total")]),s._v(", "),a("code",[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("options of item count per page")]),a("td",[s._v("number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for the page size Select's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prev-text")]),a("td",[s._v("text for the prev button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next-text")]),a("td",[s._v("text for the next button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("triggers when "),a("code",[s._v("page-size")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("page-size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when "),a("code",[s._v("current-page")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("current-page")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("custom content. To use this, you need to declare "),a("code",[s._v("slot")]),s._v(" in "),a("code",[s._v("layout")])])])])])}]}},function(s,t,a){s.exports=a(559)},function(s,t,a){function l(s){a(560)}var n=a(13)(a(562),a(563),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(561);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("6b7cde51",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){"use strict";t.__esModule=!0,t.default={data:function(){return{visible2:!1,gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}],gridData2:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City",$info:!0},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City",$positive:!0}],gridData3:[{tag:"Home",date:"2016-05-03",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-02",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-04",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-01",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-08",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-06",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-07",name:"Jack",address:"New York City"}],singleSelection:{},multipleSelection:[],model:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\nHover to activate\nClick to activate\n\n Focus to activate\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("Hover to activate")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("Click to activate")]),a("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[a("el-button",{slot:"reference"},[s._v("Focus to activate")])],1)],1),a("p",[s._v("Add "),a("code",[s._v("ref")]),s._v(" in your popover, then in your button, use "),a("code",[s._v("v-popover")]),s._v(" directive to link the button and the popover. The attribute "),a("code",[s._v("trigger")]),s._v(" is used to define how popover is triggered: "),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" or "),a("code",[s._v("focus")]),s._v(". Alternatively, you can specify reference using a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("Hover to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover2")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{ -staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"focus"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(">")]),s._v("Focus to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Other components can be nested in popover. Following is an example of nested table.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n\n\nClick to activate\n\n\n',script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-04',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-01',\n name: 'Jack',\n address: 'New York City'\n }, {\n date: '2016-05-03',\n name: 'Jack',\n address: 'New York City'\n }]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("Click to activate")])],1),a("p",[s._v("replace the "),a("code",[s._v("content")]),s._v(" attribute with a default "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover4")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n

    Are you sure to delete this?

    \n
    \n cancel\n confirm\n
    \n    \n\nDelete\n\n\n',script:"\n export default {\n data() {\n return {\n visible2: false,\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover5",attrs:{placement:"top",width:"160"},model:{value:s.visible2,callback:function(t){s.visible2=t},expression:"visible2"}},[a("p",[s._v("Are you sure to delete this?")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("cancel")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("confirm")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("Delete")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"160"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Are you sure to delete this?"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("confirm"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover5")]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("visible2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Similar to Tooltip, Popover is also built with "),a("code",[s._v("Vue-popper")]),s._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-information"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested information")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-operation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested operation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how the popover is triggered")]),a("td",[s._v("string")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("popover title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("popover content, can be replaced with a default "),a("code",[s._v("slot")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("popover width")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("Min width 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("popover placement")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Popover is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("whether popover is visible")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("popover offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("popover transition animation")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[s._v("parameters for "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[s._v("object")]),a("td",[s._v("please refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for popover")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance when "),a("code",[s._v("trigger")]),s._v(" is hover, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("text content of popover")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("HTML element that triggers popover")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("triggers when popover shows")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("triggers when popover hides")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(565)},function(s,t,a){var l=a(13)(null,a(566),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:100,status:"success"}}),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1),a("p",[s._v("Use "),a("code",[s._v("percentage")]),s._v(" attribute to set the percentage. It's "),a("strong",[s._v("required")]),s._v(" and must be between "),a("code",[s._v("0-100")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In this case the percentage takes no additional space.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),a("p",[a("code",[s._v("stroke-width")]),s._v(" attribute decides the "),a("code",[s._v("width")]),s._v(" of progress bar, and use "),a("code",[s._v("text-inside")]),s._v(" attribute to put description inside the progress bar.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{type:"circle",percentage:0}}),a("el-progress",{attrs:{type:"circle",percentage:25}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),a("p",[s._v("You can specify "),a("code",[s._v("type")]),s._v(" attribute to "),a("code",[s._v("circle")]),s._v(" to use circular progress bar, and use "),a("code",[s._v("width")]),s._v(" attribute to change the size of circle.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"25"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (external percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (internal percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"circular-progress-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Circular progress bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[s._v("percentage, "),a("strong",[s._v("required")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("the type of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("the width of progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("whether to place the percentage inside progress bar, only works when "),a("code",[s._v("type")]),s._v(" is 'line'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("the current status of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("the canvas width of circle progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to show percentage")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])]); -}]}},function(s,t,a){s.exports=a(568)},function(s,t,a){var l=a(13)(null,a(569),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"quick-start"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[s._v("¶")]),s._v(" Quick start")]),a("p",[s._v("This part walks you through the process of using Element in a webpack project.")]),a("h3",{attrs:{id:"use-starter-kit"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use Starter Kit")]),a("p",[s._v("Under construction.")]),a("h3",{attrs:{id:"config-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#config-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Config files")]),a("p",[s._v("Create a new project, and its structure should be")]),a("pre",[a("code",{staticClass:"hljs language-text"},[s._v("|- src/ --------------------- source code\n |- App.vue\n |- main.js -------------- entry\n|- .babelrc ----------------- babel config\n|- index.html --------------- HTML template\n|- package.json ------------- npm config\n|- README.md ---------------- readme\n|- webpack.config.js -------- webpack config\n")])]),a("p",[s._v("Typical configurations for these config files are:")]),a("p",[a("strong",[s._v(".babelrc")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v('"vue-app"')]),s._v("]\n}\n")])]),a("br"),a("p",[a("strong",[s._v("package.json")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"name"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-starter"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"scripts"')]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"dev"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"build"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=production webpack --progress --hide-modules"')]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v('"dependencies"')]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"element-ui"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"next"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"vue"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^2.4.2"')]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v('"devDependencies"')]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-core"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-preset-vue-app"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.2.0"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"cross-env"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.6"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"css-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.23.1"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"file-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.8.5"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"style-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.13.1"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"vue-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^9.8.0"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack-dev-server"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v("\n }\n}\n")])]),a("br"),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" path = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'path'")]),s._v(")\n"),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" webpack = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'webpack'")]),s._v(")\n\n"),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("entry")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'./src/main.js'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("output")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("path")]),s._v(": path.resolve(__dirname, "),a("span",{staticClass:"hljs-string"},[s._v("'./dist'")]),s._v("),\n "),a("span",{staticClass:"hljs-attr"},[s._v("publicPath")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'/dist/'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("filename")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'build.js'")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("module")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("loaders")]),s._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.vue$/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'vue-loader'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.js$/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'babel-loader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("exclude")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/node_modules/")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.css$/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'style-loader!css-loader'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("query")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'[name].[ext]?[hash]'")]),s._v("\n }\n }\n ]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("devServer")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("historyApiFallback")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("noInfo")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("devtool")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),a("span",{staticClass:"hljs-string"},[s._v("'production'")]),s._v(") {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.devtool = "),a("span",{staticClass:"hljs-string"},[s._v("'#source-map'")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins = ("),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins || []).concat([\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.DefinePlugin({\n "),a("span",{staticClass:"hljs-string"},[s._v("'process.env'")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("NODE_ENV")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'\"production\"'")]),s._v("\n }\n }),\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n "),a("span",{staticClass:"hljs-attr"},[s._v("compress")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("warnings")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n }\n })\n ])\n}\n")])]),a("h3",{attrs:{id:"import-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import Element")]),a("p",[s._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),a("h4",{attrs:{id:"fully-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fully import")]),a("p",[s._v("In main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-chalk/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),a("h4",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")]),a("p",[s._v("With the help of "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v(", we can import components we actually need, making the project smaller than otherwise.")]),a("p",[s._v("First, install babel-plugin-component:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("Then edit .babelrc:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"theme-chalk"')]),s._v("\n }\n ]]]\n}\n")])]),a("p",[s._v("Next, if you need Button and Select, edit main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),a("span",{staticClass:"hljs-comment"},[s._v("/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("Full example (Component list reference "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/carbon/components.json"}},[s._v("components.json")]),s._v(")")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" {\n Pagination,\n Dialog,\n Autocomplete,\n Dropdown,\n DropdownMenu,\n DropdownItem,\n Menu,\n Submenu,\n MenuItem,\n MenuItemGroup,\n Input,\n InputNumber,\n Radio,\n RadioGroup,\n RadioButton,\n Checkbox,\n 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",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n\nVue.use(Pagination)\nVue.use(Dialog)\nVue.use(Autocomplete)\nVue.use(Dropdown)\nVue.use(DropdownMenu)\nVue.use(DropdownItem)\nVue.use(Menu)\nVue.use(Submenu)\nVue.use(MenuItem)\nVue.use(MenuItemGroup)\nVue.use(Input)\nVue.use(InputNumber)\nVue.use(Radio)\nVue.use(RadioGroup)\nVue.use(RadioButton)\nVue.use(Checkbox)\nVue.use(CheckboxGroup)\nVue.use(Switch)\nVue.use(Select)\nVue.use(Option)\nVue.use(OptionGroup)\nVue.use(Button)\nVue.use(ButtonGroup)\nVue.use(Table)\nVue.use(TableColumn)\nVue.use(DatePicker)\nVue.use(TimeSelect)\nVue.use(TimePicker)\nVue.use(Popover)\nVue.use(Tooltip)\nVue.use(Breadcrumb)\nVue.use(BreadcrumbItem)\nVue.use(Form)\nVue.use(FormItem)\nVue.use(Tabs)\nVue.use(TabPane)\nVue.use(Tag)\nVue.use(Tree)\nVue.use(Alert)\nVue.use(Slider)\nVue.use(Icon)\nVue.use(Row)\nVue.use(Col)\nVue.use(Upload)\nVue.use(Progress)\nVue.use(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:"start-coding"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[s._v("¶")]),s._v(" Start coding")]),a("p",[s._v("Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[a("span",{staticClass:"hljs-comment"},[s._v("# visit localhost:8086")]),s._v("\nnpm run dev\n")])]),a("p",[s._v("Build:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm run build\n")])]),a("p",[s._v("Please refer to each component's documentation to learn how to use them.")])])}]}},function(s,t,a){s.exports=a(571)},function(s,t,a){var l=a(13)(a(572),a(573),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={data:function(){return{radio:"1",radio1:"selected and disabled",radio2:3,radio3:"New York",radio4:"New York",radio5:"New York",radio6:"New York",radio7:"1",radio8:"1",radio9:"1",radio10:"1"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Single selection among multiple options.")]),s._m(1),a("p",[s._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{attrs:{label:"1"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("Option B")])]],2),a("p",[s._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),a("code",[s._v("v-model")]),s._v(". It equals to the value of "),a("code",[s._v("label")]),s._v(" of the chosen radio. The type of "),a("code",[s._v("label")]),s._v(" is "),a("code",[s._v("String")]),s._v(", "),a("code",[s._v("Number")]),s._v(" or "),a("code",[s._v("Boolean")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Option A"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("Option B"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio1: 'selected and disabled'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("Option A")]),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("Option B")])]],2),a("p",[s._v("You just need to add the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(">")]),s._v("Option A"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(">")]),s._v("Option B"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'selected and disabled'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Suitable for choosing from some mutually exclusive options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Option A\n Option B\n Option C\n\n\n\n',script:"\n export default {\n data () {\n return {\n radio2: 3\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{model:{value:s.radio2,callback:function(t){s.radio2=t},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[s._v("Option A")]),a("el-radio",{attrs:{label:6}},[s._v("Option B")]),a("el-radio",{attrs:{label:9}},[s._v("Option C")])],1)],1),a("p",[s._v("Combine "),a("code",[s._v("el-radio-group")]),s._v(" with "),a("code",[s._v("el-radio")]),s._v(" to display a radio group. Bind a variable with "),a("code",[s._v("v-model")]),s._v(" of "),a("code",[s._v("el-radio-group")]),s._v(" element and set label value in "),a("code",[s._v("el-radio")]),s._v(". It also provides "),a("code",[s._v("change")]),s._v(" event with the current value as its parameter.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("Option A"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("Option B"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("Option C"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Radio with button styles.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio3: 'New York',\n radio4: 'New York',\n radio5: 'New York',\n radio6: 'New York'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-radio-group",{model:{value:s.radio3,callback:function(t){s.radio3=t},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"medium"},model:{value:s.radio4,callback:function(t){s.radio4=t},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.radio5,callback:function(t){s.radio5=t},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington",disabled:""}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:s.radio6,callback:function(t){s.radio6=t},expression:"radio6"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2),a("p",[s._v("You just need to change "),a("code",[s._v("el-radio")]),s._v(" element into "),a("code",[s._v("el-radio-button")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{ -staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(" >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio7: '1',\n radio8: '1',\n radio9: '1',\n radio10: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-radio",{attrs:{label:"1",border:""},model:{value:s.radio7,callback:function(t){s.radio7=t},expression:"radio7"}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:""},model:{value:s.radio7,callback:function(t){s.radio7=t},expression:"radio7"}},[s._v("Option B")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:s.radio8,callback:function(t){s.radio8=t},expression:"radio8"}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:s.radio8,callback:function(t){s.radio8=t},expression:"radio8"}},[s._v("Option B")])],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.radio9,callback:function(t){s.radio9=t},expression:"radio9"}},[a("el-radio",{attrs:{label:"1",border:""}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:"",disabled:""}},[s._v("Option B")])],1)],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:s.radio10,callback:function(t){s.radio10=t},expression:"radio10"}},[a("el-radio",{attrs:{label:"1",border:""}},[s._v("Option A")]),a("el-radio",{attrs:{label:"2",border:""}},[s._v("Option B")])],1)],1)]],2),a("p",[s._v("The "),a("code",[s._v("border")]),s._v(" attribute adds a border to Radios.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio7"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(">")]),s._v("Option A"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio7"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(">")]),s._v("Option B"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(">")]),s._v("Option A"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(">")]),s._v("Option B"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio9"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(">")]),s._v("Option A"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option B"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(">")]),s._v("Option A"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v(">")]),s._v("Option B"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio9")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio10")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute is used to disable the radio.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio button group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-borders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[s._v("¶")]),s._v(" With borders")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of Radio")]),a("td",[s._v("string / number / boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether to add a border around Radio")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the Radio, only works when "),a("code",[s._v("border")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of radio buttons or bordered radios")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the nesting radios are disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string / number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(575)},function(s,t,a){function l(s){a(576)}var n=a(13)(a(578),a(579),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(577);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("3e5e45de",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){var s=document.querySelector(".source");s.style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for rating")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n \n
    \n
    \n Color for different levels\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value1: null,\n value2: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-rate",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]),a("p",[s._v("Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the "),a("code",[s._v("colors")]),s._v(" attribute, and their two thresholds can be defined by "),a("code",[s._v("low-threshold")]),s._v(" and "),a("code",[s._v("high-threshold")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Color for different levels"),a("span",{ -staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Using text to indicate rating score")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value3: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("p",[s._v("Add attribute "),a("code",[s._v("show-text")]),s._v(" to display text at the right of Rate. You can assign texts for different scores using "),a("code",[s._v("texts")]),s._v(". "),a("code",[s._v("texts")]),s._v(" is an array whose length should be equal to the max score "),a("code",[s._v("max")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['oops', 'disappointed', 'normal', 'good', 'great']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can use different icons to distinguish different rate components.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value4: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{"icon-classes":["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"],"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("You can customize icons for three different levels using "),a("code",[s._v("icon-classes")]),s._v(". In this example, we also use "),a("code",[s._v("void-icon-class")]),s._v(" to set the icon if it is unselected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":icon-classes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("void-icon-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"icon-rate-face-off"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Read-only Rate is for displaying rating score. Half star is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n value5: 3.7\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("p",[s._v("Use attribute "),a("code",[s._v("disabled")]),s._v(" to make the component read-only. Add "),a("code",[s._v("show-score")]),s._v(" to display the rating score at the right side. Additionally, you can use attribute "),a("code",[s._v("score-template")]),s._v(" to provide a score template. It must contain "),a("code",[s._v("{value}")]),s._v(", and "),a("code",[s._v("{value}")]),s._v(" will be replaced with the rating score.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-score")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("score-template")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{value} points"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3.7")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" With text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" More icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"read-only"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[s._v("¶")]),s._v(" Read-only")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("max rating score")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Rate is read-only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("whether picking half start is allowed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("threshold value between low and medium level. The value itself will be included in low level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("threshold value between medium and high level. The value itself will be included in high level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("color of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("color of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("class name of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("class name of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to display texts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-score")]),a("td",[s._v("whether to display current score. show-score and show-text cannot be true at the same time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("color of texts")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("text array")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("score-template")]),a("td",[s._v("score template")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("Triggers when rate value is changed")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(581)},function(s,t,a){function l(s){a(582)}var n=a(13)(a(584),a(585),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(583);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("44e8fc20",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-select .el-select{width:240px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{list:null,options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City Name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:[],value10:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(s){return{value:s,label:s}})},methods:{remoteMethod:function(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value,callback:function(t){s.value=t},expression:"value"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v(" is the value of "),a("code",[s._v("el-option")]),s._v(" that is currently selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2',\n disabled: true\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value2: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}},s._l(s.options2,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("disabled")]),s._v(" in "),a("code",[s._v("el-option")]),s._v(" to "),a("code",[s._v("true")]),s._v(" to disable this option.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Disable the whole component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value3: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("disabled")]),s._v(" of "),a("code",[s._v("el-select")]),s._v(" to make it disabled.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{ -staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can clear Select using a clear icon.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value4: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("clearable")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" and a clear icon will appear. Note that "),a("code",[s._v("clearable")]),s._v(" is only for single select.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("clearable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Multiple select uses tags to display selected options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value5: []\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("multiple")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" to enable multiple mode. In this case, the value of "),a("code",[s._v("v-model")]),s._v(" will be an array of selected options.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": []\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("You can customize HTML templates for options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n cities: [{\n value: 'Beijing',\n label: 'Beijing'\n }, {\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Nanjing',\n label: 'Nanjing'\n }, {\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }],\n value6: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}},s._l(s.cities,function(t){return a("el-option",{key:t.value,attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[s._v(s._s(t.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(t.value))])])}))]],2),a("p",[s._v("Insert customized HTML templates into the slot of "),a("code",[s._v("el-option")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in cities"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: left"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.label "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.value "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Display options in groups.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options3: [{\n label: 'Popular cities',\n options: [{\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Beijing',\n label: 'Beijing'\n }]\n }, {\n label: 'City name',\n options: [{\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }, {\n value: 'Dalian',\n label: 'Dalian'\n }]\n }],\n value7: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}},s._l(s.options3,function(t){return a("el-option-group",{key:t.label,attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("Use "),a("code",[s._v("el-option-group")]),s._v(" to group the options, and its "),a("code",[s._v("label")]),s._v(" attribute stands for the name of the group.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group in options3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in group.options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popular cities'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'City name'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("You can filter options for your desired ones.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value8: ''\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-select")]),s._v(" enables filtering. By default, Select will find all the options whose "),a("code",[s._v("label")]),s._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),a("code",[s._v("filter-method")]),s._v(". "),a("code",[s._v("filter-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("Enter keywords and search data from server.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:'\n export default {\n data() {\n return {\n options4: [],\n value9: [],\n list: [],\n loading: false,\n states: ["Alabama", "Alaska", "Arizona",\n "Arkansas", "California", "Colorado",\n "Connecticut", "Delaware", "Florida",\n "Georgia", "Hawaii", "Idaho", "Illinois",\n "Indiana", "Iowa", "Kansas", "Kentucky",\n "Louisiana", "Maine", "Maryland",\n "Massachusetts", "Michigan", "Minnesota",\n "Mississippi", "Missouri", "Montana",\n "Nebraska", "Nevada", "New Hampshire",\n "New Jersey", "New Mexico", "New York",\n "North Carolina", "North Dakota", "Ohio",\n "Oklahoma", "Oregon", "Pennsylvania",\n "Rhode Island", "South Carolina",\n "South Dakota", "Tennessee", "Texas",\n "Utah", "Vermont", "Virginia",\n "Washington", "West Virginia", "Wisconsin",\n "Wyoming"]\n }\n },\n mounted() {\n this.list = this.states.map(item => {\n return { value: item, label: item };\n });\n },\n methods: {\n remoteMethod(query) {\n if (query !== \'\') {\n this.loading = true;\n setTimeout(() => {\n this.loading = false;\n this.options4 = this.list.filter(item => {\n return item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > -1;\n });\n }, 200);\n } else {\n this.options4 = [];\n }\n }\n }\n }\n', -style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"",placeholder:"Please enter a keyword","remote-method":s.remoteMethod,loading:s.loading},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}},s._l(s.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("filterable")]),s._v(" and "),a("code",[s._v("remote")]),s._v(" with "),a("code",[s._v("true")]),s._v(" to enable remote search, and you should pass the "),a("code",[s._v("remote-method")]),s._v(". "),a("code",[s._v("remote-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),a("code",[s._v("el-option")]),s._v(" is rendered with the "),a("code",[s._v("v-for")]),s._v(" directive, you should add the "),a("code",[s._v("key")]),s._v(" attribute for "),a("code",[s._v("el-option")]),s._v(". Its value needs to be unique, such as "),a("code",[s._v("item.value")]),s._v(" in the following example.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("remote")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please enter a keyword"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":remote-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"remoteMethod"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options4")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("list")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("states")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v('"Alabama"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Alaska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Arizona"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Arkansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"California"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Colorado"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Connecticut"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Delaware"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Florida"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Georgia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Hawaii"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Idaho"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Illinois"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Indiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Iowa"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kentucky"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Louisiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maine"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maryland"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Massachusetts"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Michigan"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Minnesota"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Mississippi"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Missouri"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Montana"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Nebraska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Nevada"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Hampshire"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"New Jersey"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Mexico"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"North Carolina"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"North Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Ohio"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Oklahoma"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Oregon"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Pennsylvania"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Rhode Island"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"South Carolina"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"South Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Tennessee"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Texas"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Utah"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Vermont"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Virginia"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"West Virginia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Wisconsin"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Wyoming"')]),s._v("]\n }\n },\n mounted() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".states.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": item, "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": item };\n });\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n remoteMethod(query) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (query !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n });\n }, "),a("span",{staticClass:"hljs-number"},[s._v("200")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = [];\n }\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Create and select new items that are not included in select options")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n options5: [{\n value: 'HTML',\n label: 'HTML'\n }, {\n value: 'CSS',\n label: 'CSS'\n }, {\n value: 'JavaScript',\n label: 'JavaScript'\n }],\n value10: []\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}},s._l(s.options5,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("By using the "),a("code",[s._v("allow-create")]),s._v(" attribute, users can create new items by typing in the input box. Note that for "),a("code",[s._v("allow-create")]),s._v(" to work, "),a("code",[s._v("filterable")]),s._v(" must be "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("allow-create")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Choose tags for your article"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options5")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": []\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"clearable-single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Clearable single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote Search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"create-new-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[s._v("¶")]),s._v(" Create new items")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("If the binding value of Select is an object, make sure to assign "),a("code",[s._v("value-key")]),s._v(" as its unique identity key name.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether multiple-select is activated")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Select is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value-key")]),a("td",[s._v("unique identity key name for value, required when value is an object")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether single select can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("multiple-limit")]),a("td",[s._v("maximum number of options user can select when "),a("code",[s._v("multiple")]),s._v(" is "),a("code",[s._v("true")]),s._v(". No limit when set to 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("the name attribute of select input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Select is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-create")]),a("td",[s._v("whether creating new items is allowed. To use this, "),a("code",[s._v("filterable")]),s._v(" must be true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("remote")]),a("td",[s._v("whether options are loaded from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("remote-method")]),a("td",[s._v("custom remote search method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("whether Select is loading data from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading-text")]),a("td",[s._v("displayed text while loading data from server")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Loading")])]),a("tr",[a("td",[s._v("no-match-text")]),a("td",[s._v("displayed text when no data matches the filtering query")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No matching data")])]),a("tr",[a("td",[s._v("no-data-text")]),a("td",[s._v("displayed text when there is no options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No data")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Select's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-first-option")]),a("td",[s._v("select first matching option on enter key. Use with "),a("code",[s._v("filterable")]),s._v(" or "),a("code",[s._v("remote")])]),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("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the selected value changes")]),a("td",[s._v("current selected value")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])]),a("tr",[a("td",[s._v("remove-tag")]),a("td",[s._v("triggers when a tag is removed in multiple mode")]),a("td",[s._v("removed tag value")])]),a("tr",[a("td",[s._v("clear")]),a("td",[s._v("triggers when the clear icon is clicked in a clearable Select")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("name of the group")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable all options in this group")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of option")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label of option, same as "),a("code",[s._v("value")]),s._v(" if omitted")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether option is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("focus")]),a("td",[s._v("focus the Input component")]),a("td",[s._v("-")])])])])}]}},function(s,t,a){s.exports=a(587)},function(s,t,a){var l=a(13)(a(588),a(589),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42,value6:0,value7:0,value8:0,value9:[4,8],value10:0}},methods:{formatTooltip:function(s){return s/100}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Drag the slider within a fixed range.")]),s._m(1),a("p",[s._v("The current value is displayed when the slider is being dragged.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value1: 0,\n value2: 50,\n value3: 36,\n value4: 48,\n value5: 42\n }\n },\n methods: {\n formatTooltip(val) {\n return val / 100;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default value")]),a("el-slider",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Customized initial value")]),a("el-slider",{model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hide Tooltip")]),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Format Tooltip")]),a("el-slider",{attrs:{"format-tooltip":s.formatTooltip},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Disabled")]),a("el-slider",{attrs:{disabled:""},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]],2),a("p",[s._v("Customize the initial value of the slider by setting the binding value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default value"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Customized initial value"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Hide Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":show-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag" -},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Format Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":format-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatTooltip"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Disabled"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("48")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("42")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n formatTooltip(val) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" val / "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v(";\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("The options can be discrete.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value6: 0,\n value7: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints not displayed")]),a("el-slider",{attrs:{step:10},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints displayed")]),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("Set step size with the "),a("code",[s._v("step")]),s._v(" attribute. You can display breakpoints by setting the "),a("code",[s._v("show-stops")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints not displayed"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints displayed"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Set value via a input box.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value8: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}})],1)]],2),a("p",[s._v("Set the "),a("code",[s._v("show-input")]),s._v(" attribute to display an input box on the right.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-input")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Selecting a range of values is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value9: [4, 8]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("range")]),s._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v("]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value10: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("vertical")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" enables vertical mode. In vertical mode, the "),a("code",[s._v("height")]),s._v(" attribute is required.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("vertical")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"slider"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"discrete-values"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[s._v("¶")]),s._v(" Discrete values")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slider-with-input-box"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider with input box")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"range-selection"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[s._v("¶")]),s._v(" Range selection")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("100")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Slider is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("step size")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("show-input")]),a("td",[s._v("whether to display an input box, works when "),a("code",[s._v("range")]),s._v(" is false")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-input-controls")]),a("td",[s._v("whether to display control buttons when "),a("code",[s._v("show-input")]),s._v(" is true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-stops")]),a("td",[s._v("whether to display breakpoints")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-tooltip")]),a("td",[s._v("whether to display tooltip value")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("format-tooltip")]),a("td",[s._v("format to display tooltip value")]),a("td",[s._v("Function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("range")]),a("td",[s._v("whether to select a range")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("vertical")]),a("td",[s._v("vertical mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Slider height, required in vertical mode")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label for screen reader")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing, in millisecond, works when "),a("code",[s._v("show-input")]),s._v(" is true")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(591)},function(s,t,a){var l=a(13)(a(592),a(593),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.")]),s._m(1),a("p",[s._v("Simple step bar.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n\nNext step\n\n\n',script:"\n export default {\n data() {\n return {\n active: 0\n };\n },\n\n methods: {\n next() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("Next step")])],1),a("p",[s._v("Set "),a("code",[s._v("active")]),s._v(" attribute with "),a("code",[s._v("Number")]),s._v(" type, which indicates the index of steps and starts from 0. You can set "),a("code",[s._v("space")]),s._v(" attribute when the width of the step needs to be fixed which accepts "),a("code",[s._v("Boolean")]),s._v(" type. The unit of the "),a("code",[s._v("space")]),s._v(" attribute is "),a("code",[s._v("px")]),s._v(". If not set, it is responsive. Setting the "),a("code",[s._v("finish-status")]),s._v(" attribute can change the state of the steps that have been completed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"active"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"next"')]),s._v(">")]),s._v("Next step"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n };\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n next() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active++ > "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active = "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Shows the status of the step for each step.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"Done"}}),a("el-step",{attrs:{title:"Processing"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("Use "),a("code",[s._v("title")]),s._v(" attribute to set the name of the step, or override the attribute by using a named "),a("code",[s._v("slot")]),s._v(". We have listed all the slot names for you at the end of this page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Done"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Processing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Title and desription can be centered.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{active:2,"align-center":""}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),a("el-step",{attrs:{title:"Step 3",description:"Some description"}}),a("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("align-center")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr" -},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("There is description for each step.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{active:1}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),a("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("A variety of custom icons can be used in the step bar.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{active:1}},[a("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),a("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),a("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1),a("p",[s._v("The icon is set by the "),a("code",[s._v("icon")]),s._v(" property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-picture"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Vertical step bars.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n \n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticStyle:{height:"300px"}},[a("el-steps",{attrs:{direction:"vertical",active:1}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1)]),a("p",[s._v("You only need to set the "),a("code",[s._v("direction")]),s._v(" attribute to"),a("code",[s._v("vertical")]),s._v(" in the "),a("code",[s._v("el-steps")]),s._v(" element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"height: 300px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("direction")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n \n \n \n\n\n\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:200,active:1,simple:""}},[a("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),a("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),a("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),a("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("simple")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-picture"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("simple")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-that-contains-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar that contains status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"center"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#center","aria-hidden":"true"}},[s._v("¶")]),s._v(" Center")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"simple-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Simple step bars, where "),a("code",[s._v("align-center")]),s._v(", "),a("code",[s._v("description")]),s._v(", "),a("code",[s._v("direction")]),s._v(" and "),a("code",[s._v("space")]),s._v(" will be ignored.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("the spacing of each step, will be responsive if omitted. Supports percentage.")]),a("td",[s._v("number / string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("display direction")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("current activation step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("status of current step")]),a("td",[s._v("string")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("status of end step")]),a("td",[s._v("string")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("center title and description")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("simple")]),a("td",[s._v("whether to apply simple theme")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("step icon")]),a("td",[s._v("step icon's class name. Icons can be passed via named slot as well")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("current status. It will be automatically set by Steps if not configured.")]),a("td",[s._v("wait / process / finish / error / success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("custom icon")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")])])])])}]}},function(s,t,a){s.exports=a(595)},function(s,t,a){function l(s){a(596)}var n=a(13)(a(598),a(599),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(597);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("714b121e",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-switch .el-switch{margin:20px 20px 20px 0}",""])},function(s,t){"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){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Switch is used for switching between two opposing states.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}}),a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("p",[s._v("Bind "),a("code",[s._v("v-model")]),s._v(" to a "),a("code",[s._v("Boolean")]),s._v(" typed variable. The "),a("code",[s._v("on-color")]),s._v(" and "),a("code",[s._v("off-color")]),s._v(" attribute decides the background color in two states.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value3: true,\n value4: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"Pay by month","off-text":"Pay by year"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}}),a("el-switch",{staticStyle:{display:"block"},attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-text":"Pay by month","off-text":"Pay by year"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("You can add "),a("code",[s._v("on-text")]),s._v(" and "),a("code",[s._v("off-text")]),s._v(" attribute to show texts.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pay by month"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pay by year"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: block"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pay by month"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pay by year"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n',script:"\n export default {\n data() {\n return {\n value5: '100'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Switch value: "+s.value5,placement:"top"}},[a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-value":"100","off-value":"0"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)],1),a("p",[s._v("You can set "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(" attributes. They both receive a "),a("code",[s._v("Boolean")]),s._v(", "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(" typed value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Switch value: ' + value5\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'100'")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value6: true,\n value7: false\n }\n }\n };\n", -style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{disabled:""},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}}),a("el-switch",{attrs:{disabled:""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1),a("p",[s._v("Adding the "),a("code",[s._v("disabled")]),s._v(" attribute disables Switch.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"text-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Text description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"extended-value-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Extended value types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Switch is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of Switch")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("40")])]),a("tr",[a("td",[s._v("on-close-icon")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("on")]),s._v(" state, overrides "),a("code",[s._v("on-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-close-icon")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("off")]),s._v(" state, overrides "),a("code",[s._v("off-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-value")]),a("td",[s._v("switch value when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("off-value")]),a("td",[s._v("switch value when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("on-color")]),a("td",[s._v("background color when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#409EFF")])]),a("tr",[a("td",[s._v("off-color")]),a("td",[s._v("background color when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("input name of Switch")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when value changes")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(601)},function(s,t,a){function l(s){a(602)}var n=a(13)(a(604),a(605),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(603);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("7ee768ba",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".el-table .info-row{background:#c9e5f5}.el-table .positive-row{background:#e2f0e4}.demo-table .name-wrapper{display:inline-block}.demo-table .demo-table-expand label{width:90px;color:#99a9bf}.demo-table .demo-table-expand .el-form-item{margin-right:0;margin-bottom:0;width:50%}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}],tableData2:[{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",$info:!0},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",$positive:!0}],tableData3:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData4:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData6:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}],currentRow:null,multipleSelection:[]}},methods:{getSummaries:function(s){var t=s.columns,a=s.data,l=[];return t.forEach(function(s,t){if(0===t)return void(l[t]="Total Cost");var n=a.map(function(t){return Number(t[s.property])});n.every(function(s){return isNaN(s)})?l[t]="N/A":l[t]="$ "+n.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0)}),l},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var t=this;s?s.forEach(function(s){t.$refs.multipleTable.toggleRowSelection(s)}):this.$refs.multipleTable.clearSelection()},handleClick:function(){console.log("click")},handleEdit:function(s,t){console.log(s,t)},handleDelete:function(s,t){console.log(s,t)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,t){return s.address},filterTag:function(s,t){return t.tag===s},tableRowClassName:function(s,t){return 1===t?"info-row":3===t?"positive-row":""},deleteRow:function(s,t){t.splice(s,1)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),s._m(1),a("p",[s._v("Basic table is just for data display.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:' \n\n \n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n ",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("After setting attribute "),a("code",[s._v("data")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" with an object array, you can use "),a("code",[s._v("prop")]),s._v(" (corresponding to a key of the object in "),a("code",[s._v("data")]),s._v(" array) in "),a("code",[s._v("el-table-column")]),s._v(" to insert data to table columns, and set the attribute "),a("code",[s._v("label")]),s._v(" to define the column name. You can also use the attribute "),a("code",[s._v("width")]),s._v(" to define the width of columns.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n ")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Striped table makes it easier to distinguish different rows.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("stripe")]),s._v(" accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._v(", table will be striped.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("stripe")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By default, Table has no vertical border. If you need it, you can set attribute "),a("code",[s._v("border")]),s._v(" to "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr" -},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n methods: {\n tableRowClassName(row, index) {\n if (index === 1) {\n return 'info-row';\n } else if (index === 3) {\n return 'positive-row';\n }\n return '';\n }\n },\n data() {\n return {\n tableData2: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:"\n .el-table .info-row {\n background: #c9e5f5;\n }\n\n .el-table .positive-row {\n background: #e2f0e4;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Use "),a("code",[s._v("row-class-name")]),s._v(" in "),a("code",[s._v("el-table")]),s._v(" to add custom classes to a certain row. Then you can style it with custom classes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":row-class-name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".info-row")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#c9e5f5")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".positive-row")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e2f0e4")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n tableRowClassName(row, index) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'info-row'")]),s._v(";\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'positive-row'")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n }\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("When there are too many rows, you can use a fixed header.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250"}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header without any other codes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("When there are too many columns, you can fix some of them.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n handleClick() {\n console.log('click');\n }\n },\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("Detail")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("Edit")])]}]])})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("fixed")]),s._v(" is used in "),a("code",[s._v("el-table-column")]),s._v(", it accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._v(", the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Detail"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Edit"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClick() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'click'")]),s._v(");\n }\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string" -},[s._v("'Office'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2),a("p",[s._v("Fix columns and header at the same time by combining the above two examples.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n deleteRow(index, rows) {\n rows.splice(index, 1);\n }\n },\n data() {\n return {\n tableData4: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n Remove\n ")])]}]])})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("max-height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("max-height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click.native.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n Remove\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n deleteRow(index, rows) {\n rows.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n }\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData4")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{ -staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{label:"Delivery Info"}},[a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{label:"Address Info"}},[a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2),a("p",[s._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Delivery Info"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address Info"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Single row selection is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n currentRow: null\n }\n },\n\n methods: {\n setCurrent(row) {\n this.$refs.singleTable.setCurrentRow(row);\n },\n handleCurrentChange(val) {\n this.currentRow = val;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),a("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.setCurrent(s.tableData[1])}}},[s._v("Select second row")]),a("el-button",{on:{click:function(t){s.setCurrent()}}},[s._v("Clear selection")])],1)]],2),a("p",[s._v("Table supports single row selection. You can activate it by adding the "),a("code",[s._v("highlight-current-row")]),s._v(" attribute. An event called "),a("code",[s._v("current-change")]),s._v(" will be triggered when row selection changes, and its parameters are the rows after and before this change: "),a("code",[s._v("currentRow")]),s._v(" and "),a("code",[s._v("oldCurrentRow")]),s._v(". If you need to display row index, you can add a new "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" attribute assigned to "),a("code",[s._v("index")]),s._v(", and you will see the index starting from 1.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"singleTable"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current-row")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"index"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCurrent(tableData[1])"')]),s._v(">")]),s._v("Select second row"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCurrent()"')]),s._v(">")]),s._v("Clear selection"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentRow")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n setCurrent(row) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.singleTable.setCurrentRow(row);\n },\n handleCurrentChange(val) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentRow = val;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("You can also select multiple rows.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n multipleSelection: []\n }\n },\n\n methods: {\n toggleSelection(rows) {\n if (rows) {\n rows.forEach(row => {\n this.$refs.multipleTable.toggleRowSelection(row);\n });\n } else {\n this.$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n this.multipleSelection = val;\n }\n }\n }\n", -style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3},on:{"selection-change":s.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),a("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:s._u([["default",function(t){return[s._v(s._s(t.row.date))]}]])}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.toggleSelection([s.tableData3[1],s.tableData3[2]])}}},[s._v("Toggle selection status of second and third rows")]),a("el-button",{on:{click:function(t){s.toggleSelection()}}},[s._v("Clear selection")])],1)]],2),a("p",[s._v("Activating multiple selection is easy: simply add an "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" set to "),a("code",[s._v("selection")]),s._v(". Apart from multiple selection, this example also uses "),a("code",[s._v("show-overflow-tooltip")]),s._v(": by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute "),a("code",[s._v("show-overflow-tooltip")]),s._v(", which accepts a "),a("code",[s._v("Boolean")]),s._v(" value. When set "),a("code",[s._v("true")]),s._v(", the extra content will show in tooltip when hover on the cell.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"multipleTable"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@selection-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selection"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"55"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"toggleSelection([tableData3[1], tableData3[2]])"')]),s._v(">")]),s._v("Toggle selection status of second and third rows"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"toggleSelection()"')]),s._v(">")]),s._v("Clear selection"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("multipleSelection")]),s._v(": []\n }\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n toggleSelection(rows) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (rows) {\n rows.forEach("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("row")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.toggleRowSelection(row);\n });\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".multipleSelection = val;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Sort the data to find or compare data quickly.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,"default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}})],1)]],2),a("p",[s._v("Set attribute "),a("code",[s._v("sortable")]),s._v(" in a certain column to sort the data based on this column. It accepts "),a("code",[s._v("Boolean")]),s._v(" with a default value "),a("code",[s._v("false")]),s._v(". Set table attribute "),a("code",[s._v("default-sort")]),s._v(" to determine default sort column and order. To apply your own sorting rules, use "),a("code",[s._v("sort-method")]),s._v(". If you need remote sorting from backend, set "),a("code",[s._v("sortable")]),s._v(" to "),a("code",[s._v("custom")]),s._v(", and listen to the "),a("code",[s._v("sort-change")]),s._v(" event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named "),a("code",[s._v("formatter")]),s._v(" to format the value of certain columns. It accepts a function which has two parameters: "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("column")]),s._v(". You can handle it according to your own needs.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":default-sort")]),s._v(" = "),a("span",{staticClass:"hljs-string"},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("Filter the table to find desired data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n },\n filterTag(value, row) {\n return row.tag === value;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":s.filterTag,"filter-placement":"bottom-end"},scopedSlots:s._u([["default",function(t){return[a("el-tag",{attrs:{type:"Home"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}]])})],1)]],2),a("p",[s._v("Set attribute "),a("code",[s._v("filters")]),s._v(" and "),a("code",[s._v("filter-method")]),s._v(" in "),a("code",[s._v("el-table-column")]),s._v(" makes this column filterable. "),a("code",[s._v("filters")]),s._v(" is an array, and "),a("code",[s._v("filter-method")]),s._v(" is a function deciding which rows are displayed. It has two parameters: "),a("code",[s._v("value")]),s._v(" and "),a("code",[s._v("row")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":filters")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterTag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filter-placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"scope.row.tag === 'Home' ? 'primary' : 'success'\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("close-transition")]),s._v(">")]),a("span",[s._v("{{")]),s._v("scope.row.tag"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n }]\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n },\n filterTag(value, row) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.tag === value;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("Customize table column so it can be integrated with other components.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n', -script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-icon",{attrs:{name:"time"}}),a("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(t.row.date))])]}]])}),a("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[s._v("Name: "+s._s(t.row.name))]),a("p",[s._v("Addr: "+s._s(t.row.address))]),a("div",{staticClass:"name-wrapper",slot:"reference"},[a("el-tag",[s._v(s._s(t.row.name))])],1)])]}]])}),a("el-table-column",{attrs:{label:"Operations"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{size:"small"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("Edit")]),a("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("Delete")])]}]])})],1)]],2),a("p",[s._v("You have access to the following data: row, column, $index and store (state management of Table) by "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slot")]),s._v(". (Scoped slots is supported from "),a("code",[s._v("1.1")]),s._v(", "),a("code",[s._v("inline-template")]),s._v(" still works, but it's not recommended).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Name: "),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Addr: "),a("span",[s._v("{{")]),s._v(" scope.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("Edit"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleEdit(index, row) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n },\n handleDelete(index, row) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(15),a("p",[s._v("When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([["default",function(t){return[a("p",[s._v("State: "+s._s(t.row.state))]),a("p",[s._v("City: "+s._s(t.row.city))]),a("p",[s._v("Address: "+s._s(t.row.address))]),a("p",[s._v("Zip: "+s._s(t.row.zip))])]}]])}),a("el-table-column",{attrs:{label:"Date",prop:"date"}}),a("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2),a("p",[s._v('Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using '),a("code",[s._v("Scoped slot")]),s._v(" in custom column templates.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"expand"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("State: "),a("span",[s._v("{{")]),s._v(" props.row.state "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("City: "),a("span",[s._v("{{")]),s._v(" props.row.city "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Address: "),a("span",[s._v("{{")]),s._v(" props.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Zip: "),a("span",[s._v("{{")]),s._v(" props.row.zip "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(16),a("p",[s._v("For table of numbers, you can add an extra row at the table footer displaying each column's sum.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData6: [{\n id: '12987122',\n name: 'Tom',\n amount1: '234',\n amount2: '3.2',\n amount3: 10\n }, {\n id: '12987123',\n name: 'Tom',\n amount1: '165',\n amount2: '4.43',\n amount3: 12\n }, {\n id: '12987124',\n name: 'Tom',\n amount1: '324',\n amount2: '1.9',\n amount3: 9\n }, {\n id: '12987125',\n name: 'Tom',\n amount1: '621',\n amount2: '2.2',\n amount3: 17\n }, {\n id: '12987126',\n name: 'Tom',\n amount1: '539',\n amount2: '4.1',\n amount3: 15\n }]\n };\n },\n methods: {\n getSummaries(param) {\n const { columns, data } = param;\n const sums = [];\n columns.forEach((column, index) => {\n if (index === 0) {\n sums[index] = 'Total Cost';\n return;\n }\n const values = data.map(item => Number(item[column.property]));\n if (!values.every(value => isNaN(value))) {\n sums[index] = '$ ' + values.reduce((prev, curr) => {\n const value = Number(curr);\n if (!isNaN(value)) {\n return prev + curr;\n } else {\n return prev;\n }\n }, 0);\n } else {\n sums[index] = 'N/A';\n }\n });\n\n return sums;\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",label:"Cost 1 ($)"}}),a("el-table-column",{attrs:{prop:"amount2",label:"Cost 2 ($)"}}),a("el-table-column",{attrs:{prop:"amount3",label:"Cost 3 ($)"}})],1)]],2),a("p",[s._v("You can add the summary row by setting "),a("code",[s._v("show-summary")]),s._v(" to "),a("code",[s._v("true")]),s._v(". By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using "),a("code",[s._v("sum-text")]),s._v("), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to "),a("code",[s._v("summary-method")]),s._v(", which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string" -},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":summary-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getSummaries"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 1 ($)"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 2 ($)"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 3 ($)"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData6")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987122'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'234'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'3.2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987123'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'165'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.43'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("12")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987124'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'324'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1.9'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987125'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'621'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2.2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("17")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987126'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'539'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("\n }]\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n getSummaries(param) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { columns, data } = param;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" sums = [];\n columns.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("column, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'Total Cost'")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" values = data.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(item[column.property]));\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!values.every("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("value")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value))) {\n sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'$ '")]),s._v(" + values.reduce("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("prev, curr")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" value = "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(curr);\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value)) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev + curr;\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev;\n }\n }, "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'N/A'")]),s._v(";\n }\n });\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" sums;\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"striped-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Striped Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-border"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with border")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-column"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed column")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed columns and header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fluid-height Table with fixed header (and columns)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping-table-head"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping table head")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sorting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sorting")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filter")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-column-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom column template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"expandable-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Expandable row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"summary-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Summary row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("table data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table's height. By default it has an "),a("code",[s._v("auto")]),s._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max-height")]),a("td",[s._v("Table's max-height. The height of the table starts from "),a("code",[s._v("auto")]),s._v(" until it reaches the maxHeight limit. The "),a("code",[s._v("maxHeight")]),s._v(" is measured in pixels, same as "),a("code",[s._v("height")])]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("whether table is striped")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether table has vertical border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("whether width of column automatically fits its container")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-header")]),a("td",[s._v("whether table header is visible")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("highlight-current-row")]),a("td",[s._v("whether current row is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-row-key")]),a("td",[s._v("key of current row, a set only prop")]),a("td",[s._v("string,number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-class-name")]),a("td",[s._v("function that returns custom class names for a row, or a string assigning class names for every row")]),a("td",[s._v("Function(row, index)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-style")]),a("td",[s._v("function that returns custom style for a row, or a string assigning custom style for every row")]),a("td",[s._v("Function(row, index)/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-key")]),a("td",[s._v("key of row data, used for optimizing rendering. Required if "),a("code",[s._v("reserve-selection")]),s._v(" is on. When its type is String, multi-level access is supported, e.g. "),a("code",[s._v("user.info.id")]),s._v(", but "),a("code",[s._v("user.info[0].id")]),s._v(" is not supported, in which case "),a("code",[s._v("Function")]),s._v(" should be used.")]),a("td",[s._v("Function(row)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("Displayed text when data is empty. You can customize this area with "),a("code",[s._v('slot="empty"')])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("No Data")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v('whether expand all rows by default, only works when the table has a column type="expand"')]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-row-keys")]),a("td",[s._v("set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td")]),a("tr",[a("td",[s._v("default-sort")]),a("td",[s._v("set the default sort column and order. property "),a("code",[s._v("prop")]),s._v(" is used to set default sort column, property "),a("code",[s._v("order")]),s._v(" is used to set default sort order")]),a("td",[s._v("Object")]),a("td",[a("code",[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("if "),a("code",[s._v("prop")]),s._v(" is set, and "),a("code",[s._v("order")]),s._v(" is not set, then "),a("code",[s._v("order")]),s._v(" is default to ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",[s._v("effect")]),s._v(" property")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td")]),a("tr",[a("td",[s._v("show-summary")]),a("td",[s._v("whether to display a summary row")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sum-text")]),a("td",[s._v("displayed text for the first column of summary row")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("Sum")])]),a("tr",[a("td",[s._v("summary-method")]),a("td",[s._v("custom summary method")]),a("td",[s._v("Function({ columns, data })")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when user clicks the checkbox in a row")]),a("td",[s._v("selection, row")])]),a("tr",[a("td",[s._v("select-all")]),a("td",[s._v("triggers when user clicks the checkbox in table header")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("selection-change")]),a("td",[s._v("triggers when selection changes")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("cell-mouse-enter")]),a("td",[s._v("triggers when hovering into a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-mouse-leave")]),a("td",[s._v("triggers when hovering out of a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-click")]),a("td",[s._v("triggers when clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-dblclick")]),a("td",[s._v("triggers when double clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("row-click")]),a("td",[s._v("triggers when clicking a row")]),a("td",[s._v("row, event, column")])]),a("tr",[a("td",[s._v("row-contextmenu")]),a("td",[s._v("triggers when user right clicks on a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("row-dblclick")]),a("td",[s._v("triggers when double clicking a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("header-click")]),a("td",[s._v("triggers when clicking a column header")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("sort-change")]),a("td",[s._v("triggers when Table's sorting changes")]),a("td",[s._v("{ column, prop, order }")])]),a("tr",[a("td",[s._v("filter-change")]),a("td",[s._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered")]),a("td",[s._v("filters")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current row changes")]),a("td",[s._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[s._v("header-dragend")]),a("td",[s._v("triggers when finish dragging header")]),a("td",[s._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[s._v("expand")]),a("td",[s._v("triggers when user expands or collapses a row")]),a("td",[s._v("row, expanded")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearSelection")]),a("td",[s._v("used in multiple selection Table, clear selection, might be useful when "),a("code",[s._v("reserve-selection")]),s._v(" is on")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("toggleRowSelection")]),a("td",[s._v("used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected")]),a("td",[s._v("row, selected")])]),a("tr",[a("td",[s._v("setCurrentRow")]),a("td",[s._v("used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.")]),a("td",[s._v("row")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("append")]),a("td",[s._v("Contents to be inserted after the last row. It is still nested inside the "),a("code",[s._v("")]),s._v(" tag. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one.")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-column-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the column. If set to "),a("code",[s._v("selection")]),s._v(", the column will display checkbox. If set to "),a("code",[s._v("index")]),s._v(", the column will display index of the row (staring from 1). If set to "),a("code",[s._v("expand")]),s._v(", the column will display expand icon.")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("column label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("column-key")]),a("td",[s._v("column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered")]),a("td",[s._v("string")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prop")]),a("td",[s._v("field name. You can also use its alias: "),a("code",[s._v("property")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("column width")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min-width")]),a("td",[s._v("column minimum width. Columns with "),a("code",[s._v("width")]),s._v(" has a fixed width, while columns with "),a("code",[s._v("min-width")]),s._v(" has a width that is distributed in proportion")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fixed")]),a("td",[s._v("whether column is fixed at left/right. Will be fixed at left if "),a("code",[s._v("true")])]),a("td",[s._v("string/boolean")]),a("td",[s._v("true/left/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-header")]),a("td",[s._v("render function for table header of this column")]),a("td",[s._v("Function(h, { column, $index })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sortable")]),a("td",[s._v("whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the "),a("code",[s._v("sort-change")]),s._v(" event of Table")]),a("td",[s._v("boolean, string")]),a("td",[s._v("true, false, custom")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sort-method")]),a("td",[s._v("sorting method, works when "),a("code",[s._v("sortable")]),s._v(" is "),a("code",[s._v("true")]),s._v(". Should return a boolean.")]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resizable")]),a("td",[s._v("whether column width can be resized, works when "),a("code",[s._v("border")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("formatter")]),a("td",[s._v("function that formats cell content")]),a("td",[s._v("Function(row, column, cellValue)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-overflow-tooltip")]),a("td",[s._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("string")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("header-align")]),a("td",[s._v("alignment of the table header. If omitted, the value of the above "),a("code",[s._v("align")]),s._v(" attribute will be applied")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("class-name")]),a("td",[s._v("class name of cells in the column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-class-name")]),a("td",[s._v("class name of the label of this column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("selectable")]),a("td",[s._v("function that determines if a certain row can be selected, works when "),a("code",[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-selection")]),a("td",[s._v("whether to reserve selection after data refreshing, works when "),a("code",[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filters")]),a("td",[s._v("an array of data filtering options. For each element in this array, "),a("code",[s._v("text")]),s._v(" and "),a("code",[s._v("value")]),s._v(" are required")]),a("td",[s._v("Array[{ text, value }]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-placement")]),a("td",[s._v("placement for the filter dropdown")]),a("td",[s._v("String")]),a("td",[s._v("same as Tooltip's "),a("code",[s._v("placement")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-multiple")]),a("td",[s._v("whether data filtering supports multiple options")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("data filtering method. If "),a("code",[s._v("filter-multiple")]),s._v(" is on, this method will be called multiple times for each row, and a row will display if one of the calls returns "),a("code",[s._v("true")])]),a("td",[s._v("Function(value, row)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filtered-value")]),a("td",[s._v("filter value for selected data, might be useful when table header is rendered with "),a("code",[s._v("render-header")])]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])]); -}]}},function(s,t,a){s.exports=a(607)},function(s,t,a){var l=a(13)(a(608),a(609),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeName:"second",activeName2:"first",editableTabsValue:"2",editableTabsValue2:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2,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){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Divide data collections which are related yet belong to different types.")]),s._m(1),a("p",[s._v("Basic and concise tabs.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n activeName: 'first'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[s._v("Task")])],1)]],2),a("p",[s._v("Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the "),a("code",[s._v("value")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Tabs styled as cards.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n activeName: 'first'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._v(" can get a card-styled tab.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Border card tabs.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n User\n Config\n Role\n Task\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("border-card")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n tabPosition: 'top'\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:s.tabPosition,callback:function(t){s.tabPosition=t},expression:"tabPosition"}},[a("el-radio-button",{attrs:{label:"top"}},[s._v("top")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("right")]),a("el-radio-button",{attrs:{label:"bottom"}},[s._v("bottom")]),a("el-radio-button",{attrs:{label:"left"}},[s._v("left")])],1),a("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":s.tabPosition}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),a("p",[s._v("You can choose from four directions: "),a("code",[s._v('tabPosition="left|right|top|bottom"')])]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tabPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 30px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("top"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("right"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("bottom"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("left"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":tab-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tabPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"height: 200px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tabPosition")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top'")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("You can use named slot to customize the tab label content.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Route\n Route\n \n Config\n Role\n Task\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n Route\n ")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v(" Route"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n Route\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Only card type Tabs support addable & closeable.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n {{item.content}}\n \n\n\n',script:"\n export default {\n data() {\n return {\n editableTabsValue: '2',\n editableTabs: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n handleTabsEdit(targetName, action) {\n if (action === 'add') {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue = newTabName;\n }\n if (action === 'remove') {\n let tabs = this.editableTabs;\n let activeName = this.editableTabsValue;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue = activeName;\n this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:s.handleTabsEdit},model:{value:s.editableTabsValue,callback:function(t){s.editableTabsValue=t},expression:"editableTabsValue"}},s._l(s.editableTabs,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("editable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@edit")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleTabsEdit(targetName, action) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'add'")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'remove'")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{staticClass:"hljs-keyword" -},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = activeName;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n add tab\n \n
    \n\n \n {{item.content}}\n \n\n\n',script:"\n export default {\n data() {\n return {\n editableTabsValue2: '2',\n editableTabs2: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n addTab(targetName) {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs2.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n let tabs = this.editableTabs2;\n let activeName = this.editableTabsValue2;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue2 = activeName;\n this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){s.addTab(s.editableTabsValue2)}}},[s._v("\n add tab\n ")])],1),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":s.removeTab},model:{value:s.editableTabsValue2,callback:function(t){s.editableTabsValue2=t},expression:"editableTabsValue2"}},s._l(s.editableTabs2,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n >")]),s._v("\n add tab\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeTab"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n addTab(targetName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card Style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"border-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Border card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-position"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-position","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab position")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use "),a("code",[s._v("tab-position")]),s._v(" attribute to set the tab's position.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom Tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"add-close-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Add & close tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customized trigger button of new tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of Tab")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("whether Tab is addable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether Tab is addable and closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-name(deprecated)")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])]),a("tr",[a("td",[s._v("tab-position")]),a("td",[s._v("position of tabs")]),a("td",[s._v("string")]),a("td",[s._v("top/right/bottom/left")]),a("td",[s._v("top")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("triggers when a tab is clicked")]),a("td",[s._v("clicked tab")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("triggers when tab-remove button is clicked")]),a("td",[s._v("name of the removed tab")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("triggers when tab-add button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("triggers when tab-add button or tab-remove is clicked")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("title of the tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tab is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(611)},function(s,t,a){function l(s){a(612)}var n=a(13)(a(614),a(615),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(613);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("3d1416ac",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){"use strict";t.__esModule=!0,t.default={data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}],dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for marking and selection.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Tag One\nTag Two\nTag Three\nTag Four\nTag Five\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tag",[s._v("Tag One")]),a("el-tag",{attrs:{type:"success"}},[s._v("Tag Two")]),a("el-tag",{attrs:{type:"info"}},[s._v("Tag Three")]),a("el-tag",{attrs:{type:"warning"}},[s._v("Tag Four")]),a("el-tag",{attrs:{type:"danger"}},[s._v("Tag Five")])],1),a("p",[s._v("Use the "),a("code",[s._v("type")]),s._v(" attribute to define Tag's type. In addition, the "),a("code",[s._v("color")]),s._v(" attribute can be used to set the background color of the Tag.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("Tag One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Tag Two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Tag Three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Tag Four"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Tag Five"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n {{tag.name}}\n\n\n\n',script:"\n export default {\n data() {\n return {\n tags: [\n { name: 'Tag 1', type: '' },\n { name: 'Tag 2', type: 'success' },\n { name: 'Tag 3', type: 'info' },\n { name: 'Tag 4', type: 'warning' },\n { name: 'Tag 5', type: 'danger' }\n ]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},s._l(s.tags,function(t){return a("el-tag",{key:t.name,attrs:{closable:"",type:t.type}},[s._v("\n "+s._s(t.name)+"\n")])})),a("p",[a("code",[s._v("closable")]),s._v(" attribute can be used to define a removable tag. It accepts a "),a("code",[s._v("Boolean")]),s._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),a("code",[s._v("disable-transitions")]),s._v(" attribute, which accepts a "),a("code",[s._v("Boolean")]),s._v(", to "),a("code",[s._v("true")]),s._v(". "),a("code",[s._v("close")]),s._v(" event triggers when Tag is removed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in tags"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.type"')]),s._v(">")]),s._v("\n "),a("span",[s._v("{{")]),s._v("tag.name"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 4'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(" }\n ]\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n {{tag}}\n\n\n\n+ New Tag\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n inputVisible: false,\n inputValue: ''\n };\n },\n methods: {\n handleClose(tag) {\n this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n },\n\n showInput() {\n this.inputVisible = true;\n this.$nextTick(_ => {\n this.$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n let inputValue = this.inputValue;\n if (inputValue) {\n this.dynamicTags.push(inputValue);\n }\n this.inputVisible = false;\n this.inputValue = '';\n }\n }\n }\n",style:"\n .el-tag + .el-tag {\n margin-left: 10px;\n }\n .button-new-tag {\n margin-left: 10px;\n height: 32px;\n line-height: 30px;\n padding-top: 0;\n padding-bottom: 0;\n }\n .input-new-tag {\n width: 90px;\n margin-left: 10px;\n vertical-align: bottom;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n "+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(t){return"button"in t||!s._k(t.keyCode,"enter",13)?void s.handleInputConfirm(t):null}},model:{value:s.inputValue,callback:function(t){s.inputValue=t},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in dynamicTags"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":disable-transitions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose(tag)"')]),s._v(">")]),s._v("\n "),a("span",[s._v("{{")]),s._v("tag"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input-new-tag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputVisible"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"saveTagInput"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@keyup.enter.native")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@blur")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"button-new-tag"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-tag")]),s._v(" + "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-tag")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".button-new-tag")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("32px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("30px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".input-new-tag")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("90px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("vertical-align")]),s._v(": bottom;\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicTags")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("inputVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),a("span",{staticClass:"hljs-string" -},[s._v("''")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClose(tag) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n },\n\n showInput() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$nextTick("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" inputValue = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (inputValue) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue = "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Default\nMedium\nSmall\nMini\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tag",[s._v("Default")]),a("el-tag",{attrs:{size:"medium"}},[s._v("Medium")]),a("el-tag",{attrs:{size:"small"}},[s._v("Small")]),a("el-tag",{attrs:{size:"mini"}},[s._v("Mini")])],1),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("medium")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"medium"')]),s._v(">")]),s._v("Medium"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Small"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),s._v("Mini"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"removable-tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Removable Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"edit-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Edit Dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use the "),a("code",[s._v("close")]),s._v(" event to add and remove tag dynamically.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("theme")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tag can be removed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disable-transitions")]),a("td",[s._v("whether to disable animations")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("whether Tag has a highlighted border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("background color of the Tag")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("tag size")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when Tag is removed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(617)},function(s,t,a){function l(s){a(618)}var n=a(13)(a(620),a(621),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(619);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("6f1521e6",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box .el-date-editor+.el-date-editor{margin-left:10px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:"",value2:new Date(2016,9,10,18,40),value3:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],startTime:"",endTime:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Time Picker for time input.")]),s._m(1),a("p",[s._v("Provide a list of fixed time for users to choose.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value1: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("p",[s._v("Use "),a("code",[s._v("el-time-select")]),s._v(" label, then assign start time, end time and time step with "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(" and "),a("code",[s._v("step")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Can pick an arbitrary time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value2: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Use "),a("code",[s._v("el-time-picker")]),s._v(" label, and you can limit the time range by using "),a("code",[s._v("selectableRange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("If start time is picked at first, then the end time will change accordingly.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n",script:"\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(t){s.startTime=t},expression:"startTime"}}),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(t){s.endTime=t},expression:"endTime"}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start time"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"startTime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End time"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"endTime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\"")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("startTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("endTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can pick an arbitrary time range.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})]],2),a("p",[s._v("We can pick a time range by adding an "),a("code",[s._v("is-range")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("is-range")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("range-separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"To"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("start-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start time"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("end-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End time"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")]\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("medium / small / mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder in non-range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("start-placeholder")]),a("td",[s._v("placeholder for the start time in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("end-placeholder")]),a("td",[s._v("placeholder for the end time in range mode")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of the picker")]),a("td",[s._v("date for Time Picker, and string for Time Select")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left / center / right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for TimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("'-'")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("start time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("end time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("time step")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("minimum time, any time before this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("maximum time, any time after this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("available time range, e.g."),a("code",[s._v("'18:30:00 - 20:30:00'")]),s._v("or"),a("code",[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string / array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when Input blurs")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when Input focuses")]),a("td",[s._v("(event: Event)")])])])])}]}},function(s,t,a){s.exports=a(623)},function(s,t,a){function l(s){a(624)}var n=a(13)(a(626),a(627),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(625);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("a3fcd9aa",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-tooltip.demo-en-US .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip.demo-en-US .box{width:400px}.demo-tooltip.demo-en-US .box .top{text-align:center}.demo-tooltip.demo-en-US .box .left{float:left;width:110px}.demo-tooltip.demo-en-US .box .right{float:right;width:110px}.demo-tooltip.demo-en-US .box .bottom{clear:both;text-align:center}.demo-tooltip.demo-en-US .box .item{margin:4px}.demo-tooltip.demo-en-US .box .left .el-tooltip__popper,.demo-tooltip.demo-en-US .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip.demo-en-US .box .el-tooltip{margin-left:0}.demo-tooltip.demo-en-US:first-of-type .source .el-button{width:110px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display prompt information for mouse hover.")]),s._m(1),a("p",[s._v("Tooltip has 9 placements.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n
    \n \n top-start\n \n \n top\n \n \n top-end\n \n
    \n
    \n \n left-start\n \n \n left\n \n \n left-end\n \n
    \n\n
    \n \n right-start\n \n \n right\n \n \n right-end\n \n
    \n
    \n \n bottom-start\n \n \n bottom\n \n \n bottom-end\n \n
    \n
    \n\n\n',script:null,style:"\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n" -}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[a("el-button",[s._v("top-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[s._v("top")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[s._v("top-end")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[s._v("left-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[s._v("left")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[s._v("left-end")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[s._v("right-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[s._v("right")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[s._v("right-end")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[s._v("bottom-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[s._v("bottom")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[s._v("bottom-end")])],1)],1)])]),a("p",[s._v("Use attribute "),a("code",[s._v("content")]),s._v(" to set the display content when hover. The attribute "),a("code",[s._v("placement")]),s._v(" determines the position of the tooltip. Its value is "),a("code",[s._v("[orientation]-[alignment]")]),s._v(" with four orientations "),a("code",[s._v("top")]),s._v(", "),a("code",[s._v("left")]),s._v(", "),a("code",[s._v("right")]),s._v(", "),a("code",[s._v("bottom")]),s._v(" and three alignments "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(", "),a("code",[s._v("null")]),s._v(", and the default alignment is null. Take "),a("code",[s._v('placement="left-end"')]),s._v(" for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"box"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Dark\n\n\n Light\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("effect")]),s._v(" to modify theme, and the default value is "),a("code",[s._v("dark")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Display multiple lines of text and set their format.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    multiple lines
    second line
    \n Top center\n    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{slot:"content"},[s._v("multiple lines"),a("br"),s._v("second line")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("Override attribute "),a("code",[s._v("content")]),s._v(" of "),a("code",[s._v("el-tooltip")]),s._v(" by adding a slot named "),a("code",[s._v("content")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(">")]),s._v("multiple lines"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v("/>")]),s._v("second line"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),s._m(6),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,style:"\n .slide-fade-enter-active {\n transition: all .3s ease;\n }\n .slide-fade-leave-active {\n transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n }\n .slide-fade-enter, .expand-fade-leave-active {\n margin-left: 20px;\n opacity: 0;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("click to "+s._s(s.disabled?"active":"close")+" tooltip function")])],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click to close tooltip function"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("click to "),a("span",[s._v("{{")]),s._v("disabled ? 'active' : 'close'"),a("span",[s._v("}}")]),s._v(" tooltip function"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter-active")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" ease;\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-leave-active")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("cubic-bezier")]),s._v("(1.0, 0.5, 0.8, 1.0);\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter")]),s._v(", "),a("span",{staticClass:"hljs-selector-class"},[s._v(".expand-fade-leave-active")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Theme")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip has two themes: "),a("code",[s._v("dark")]),s._v(" and "),a("code",[s._v("light")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" More Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"advanced-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Advanced usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("transition")]),s._v(" attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute allows you to disable "),a("code",[s._v("tooltip")]),s._v(". You just need set it to "),a("code",[s._v("true")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In fact, Tooltip is an extension based on "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(", you can use any attribute that are allowed in Vue-popper.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("The "),a("code",[s._v("router-link")]),s._v(" component is not supported in tooltip, please use "),a("code",[s._v("vm.$router.push")]),s._v(".")]),a("p",[s._v("Disabled form elements are not supported in tooltip, see more information at "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v(", please wrap disabled form elements.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("Tooltip theme")]),a("td",[s._v("string")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("display content, can be overridden by "),a("code",[s._v("slot#content")])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("position of Tooltip")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("visibility of Tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tooltip is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset of the Tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("animation name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether an arrow is displayed. For more information, check "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" page")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" parameters")]),a("td",[s._v("Object")]),a("td",[s._v("refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" doc")]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("whether to control Tooltip manually. "),a("code",[s._v("mouseenter")]),s._v(" and "),a("code",[s._v("mouseleave")]),s._v(" won't have effects if set to "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Tooltip's popper")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("whether the mouse can enter the tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("hide-after")]),a("td",[s._v("timeout in milliseconds to hide tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])]); -}]}},function(s,t,a){s.exports=a(629)},function(s,t,a){function l(s){a(630)}var n=a(13)(a(632),a(633),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(631);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("06e6b0bd",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-transfer .transfer-footer{margin-left:15px;padding:6px 5px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=function(s){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4===0});return t},t=function(s){var t=[],a=["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "],l=["CA","IL","MD","TX","FL","CO","CT"];return a.forEach(function(s,a){t.push({label:s,key:a,initial:l[a]})}),t},a=function(s){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"Option "+a,disabled:a%4===0});return t};return{data:s(),data2:t(),data3:a(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,t){return t.initial.toLowerCase().indexOf(s.toLowerCase())>-1},renderFunc:function(s,t){return s("span",null,[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value1: [1, 4]\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})]],2),a("p",[s._v("Data is passed to Transfer via the "),a("code",[s._v("data")]),s._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),a("code",[s._v("key")]),s._v(" being the identification of the data item, "),a("code",[s._v("label")]),s._v(" being the displayed text, and "),a("code",[s._v("disabled")]),s._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),a("code",[s._v("v-model")]),s._v(", and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the "),a("code",[s._v("v-model")]),s._v(" with an array.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can search and filter data items.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n const generateData2 = _ => {\n const data = [];\n const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n states.forEach((city, index) => {\n data.push({\n label: city,\n key: index,\n initial: initials[index]\n });\n });\n return data;\n };\n return {\n data2: generateData2(),\n value2: [],\n filterMethod(query, item) {\n return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","filter-method":s.filterMethod,"filter-placeholder":"State Abbreviations",data:s.data2},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Set the "),a("code",[s._v("filterable")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to enable filter mode. By default, if the data item "),a("code",[s._v("label")]),s._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),a("code",[s._v("filter-method")]),s._v(" attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterMethod"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filter-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State Abbreviations"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData2 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" states = ["),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Illinois'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Maryland'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Texas'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Colorado'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Connecticut '")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" initials = ["),a("span",{staticClass:"hljs-string"},[s._v("'CA'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'IL'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'MD'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'TX'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'FL'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'CO'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'CT'")]),s._v("];\n states.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": city,\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": index,\n "),a("span",{staticClass:"hljs-attr"},[s._v("initial")]),s._v(": initials[index]\n });\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": generateData2(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": [],\n filterMethod(query, item) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.initial.toLowerCase().indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n }\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value3: [1],\n renderFunc(h, option) {\n return { option.key } - { option.label };\n }\n };\n },\n\n methods: {\n handleChange(value, direction, movedKeys) {\n console.log(value, direction, movedKeys);\n }\n }\n };\n",style:"\n .transfer-footer {\n margin-left: 20px;\n padding: 6px 5px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"left-footer"},[s._v("Operation")]),a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"right-footer"},[s._v("Operation")])],1)]],2),a("p",[s._v("Use "),a("code",[s._v("titles")]),s._v(", "),a("code",[s._v("button-texts")]),s._v(", "),a("code",[s._v("render-content")]),s._v(" and "),a("code",[s._v("format")]),s._v(" to respectively customize list titles, button texts, render function for data items, checking status texts in list header. For list footer contents, two named slots are provided: "),a("code",[s._v("left-footer")]),s._v(" and "),a("code",[s._v("right-footer")]),s._v(". Plus, if you want some items initially checked, you can use "),a("code",[s._v("left-default-checked")]),s._v(" and "),a("code",[s._v("right-default-checked")]),s._v(". Finally, this example demonstrate the "),a("code",[s._v("change")]),s._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":left-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":right-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[1]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderFunc"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":titles")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['Source', 'Target']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":button-texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['To left', 'To right']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n noChecked: '${total}',\n hasChecked: '${checked}/${total}'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transfer-footer")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("5px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("],\n renderFunc(h, option) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"xml"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),a("span",{staticClass:"hljs-tag"},[s._v("")])]),s._v(";\n }\n };\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(value, direction, movedKeys) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n const generateData3 = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n value: i,\n desc: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data3: generateData3(),\n value4: []\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})]],2),a("p",[s._v("The data items in this example do not have "),a("code",[s._v("key")]),s._v("s or "),a("code",[s._v("label")]),s._v("s, instead they have "),a("code",[s._v("value")]),s._v("s and "),a("code",[s._v("desc")]),s._v("s. So you need to set aliases for "),a("code",[s._v("key")]),s._v(" and "),a("code",[s._v("label")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n key: 'value',\n label: 'desc'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData3 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data3")]),s._v(": generateData3(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": []\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"transfer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prop-aliases"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prop aliases")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("By default, Transfer looks for "),a("code",[s._v("key")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("disabled")]),s._v(" in a data item. If your data items have different key names, you can use the "),a("code",[s._v("props")]),s._v(" attribute to define aliases.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("data source")]),a("td",[s._v("array[{ key, label, disabled }]")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Transfer is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-placeholder")]),a("td",[s._v("placeholder for the filter input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Enter keyword")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("titles")]),a("td",[s._v("custom list titles")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['List 1', 'List 2']")])]),a("tr",[a("td",[s._v("button-texts")]),a("td",[s._v("custom button texts")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("custom render function for data items")]),a("td",[s._v("function(h, option)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("texts for checking status in list header")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("prop aliases for data source")]),a("td",[s._v("object{key, label, disabled}")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("left-default-checked")]),a("td",[s._v("key array of initially checked data items of the left list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("right-default-checked")]),a("td",[s._v("key array of initially checked data items of the right list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("left-footer")]),a("td",[s._v("content of left list footer")])]),a("tr",[a("td",[s._v("right-footer")]),a("td",[s._v("content of right list footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when data items change in the right list")]),a("td",[s._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])])])])}]}},function(s,t,a){s.exports=a(635)},function(s,t,a){function l(s){a(636)}var n=a(13)(a(638),a(639),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(637);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("0452d246",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){"use strict";s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show=!s.show}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),a("p",[s._v("We have two fading effects: "),a("code",[s._v("el-fade-in-linear")]),s._v(" and "),a("code",[s._v("el-fade-in")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{staticClass:"hljs-attr"},[s._v("show")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#409EFF")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show2: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show2=!s.show2}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),a("p",[a("code",[s._v("el-zoom-in-center")]),s._v(", "),a("code",[s._v("el-zoom-in-top")]),s._v(" and "),a("code",[s._v("el-zoom-in-bottom")]),s._v(" are provided.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{staticClass:"hljs-attr"},[s._v("show2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#409EFF")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show3: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show3=!s.show3}}},[s._v("Click Me")]),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")]),a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")])])])],1)],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{staticClass:"hljs-attr"},[s._v("show3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#409EFF")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"built-in-transition"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[s._v("¶")]),s._v(" Built-in transition")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use Element's built-in transitions directly. Before that, please read the "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[s._v("transition docs")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fade"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[s._v("¶")]),s._v(" fade")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[s._v("¶")]),s._v(" zoom")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("For collapse effect, use the "),a("code",[s._v("el-collapse-transition")]),s._v(" component.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-js"},[a("span",{staticClass:"hljs-comment"},[s._v("// fade/zoom")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-defaut/base.css'")]),s._v(";\n"),a("span",{staticClass:"hljs-comment"},[s._v("// collapse")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" CollapseTransition "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/transitions/collapse-transition'")]),s._v(";\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}]}},function(s,t,a){s.exports=a(641)},function(s,t,a){function l(s){a(642)}var n=a(13)(a(644),a(645),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(643);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("76da0126",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){"use strict";t.__esModule=!0;var a=[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],l=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],n=[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],e=1e3,i=[{name:"region1"},{name:"region2"}],v=1,_={label:"name",children:"zones"},r={label:"name",children:"zones",isLeaf:"leaf"},c={children:"children",label:"label"};t.default={watch:{filterText:function(s){this.$refs.tree2.filter(s)}},methods:{handleCheckChange:function(s,t,a){console.log(s,t,a)},handleNodeClick:function(s){console.log(s)},loadNode:function(s,t){if(0===s.level)return t([{name:"Root1"},{name:"Root2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s=void 0;s=a?[{name:"zone"+v++},{name:"zone"+v++}]:[],t(s)},500)},loadNode1:function(s,t){return 0===s.level?t([{name:"region"}]):s.level>1?t([]):void setTimeout(function(){var s=[{name:"leaf",leaf:!0},{name:"zone"}];t(s)},500)},getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"二级 2-1"},{id:9,label:"三级 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])},append:function(s,t){var a={id:e++,label:"testtest",children:[]};s.append(a,t),t.children=t.children||[],t.children.push(a)},remove:function(s,t,a){var l=t.parent,n=l.data.children.findIndex(function(s){return s.id===a.id});l.data.children.splice(n,1),s.remove(a)},renderContent:function(s,t){var a=this,l=t.node,n=t.data,e=t.store;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(e,n)}}},["Append"]),s("el-button",{style:"font-size: 12px;",attrs:{type:"text"},on:{click:function(){return a.remove(e,l,n)}}},["Delete"])])])},filterNode:function(s,t){return!s||t.label.indexOf(s)!==-1}},data:function(){return{data:a,data2:l,data3:n,regions:i,defaultProps:c,props:_,props1:r,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display a set of data with hierarchies.")]),s._m(1),a("p",[s._v("Basic tree structure.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n data: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1',\n children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{ -staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n props: {\n label: 'name',\n children: 'zones'\n },\n count: 1\n };\n },\n methods: {\n handleCheckChange(data, checked, indeterminate) {\n console.log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n console.log(data);\n },\n loadNode(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n }\n if (node.level > 3) return resolve([]);\n\n var hasChild;\n if (node.data.name === 'region1') {\n hasChild = true;\n } else if (node.data.name === 'region2') {\n hasChild = false;\n } else {\n hasChild = Math.random() > 0.5;\n }\n\n setTimeout(() => {\n var data;\n if (hasChild) {\n data = [{\n name: 'zone' + this.count++\n }, {\n name: 'zone' + this.count++\n }];\n } else {\n data = [];\n }\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":load")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loadNode"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("lazy")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zones'")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("count")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCheckChange(data, checked, indeterminate) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n },\n loadNode(node, resolve) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root1'")]),s._v(" }, { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root2'")]),s._v(" }]);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(") {\n hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n hasChild = "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(";\n }\n\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" data;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (hasChild) {\n data = [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n }];\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n data = [];\n }\n\n resolve(data);\n }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n props1: {\n label: 'name',\n children: 'zones',\n isLeaf: 'leaf'\n },\n };\n },\n methods: {\n loadNode1(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'region' }]);\n }\n if (node.level > 1) return resolve([]);\n\n setTimeout(() => {\n const data = [{\n name: 'leaf',\n leaf: true\n }, {\n name: 'zone'\n }];\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{props:s.props1,load:s.loadNode1,lazy:"","show-checkbox":""}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":load")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loadNode1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("lazy")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("props1")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zones'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("isLeaf")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'leaf'")]),s._v("\n },\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n loadNode1(node, resolve) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region'")]),s._v(" }]);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'leaf'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("leaf")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v("\n }];\n\n resolve(data);\n }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("The checkbox of a node can be set as disabled.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data3: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 3,\n label: 'Level two 2-1',\n children: [{\n id: 4,\n label: 'Level three 3-1-1'\n }, {\n id: 5,\n label: 'Level three 3-1-2',\n disabled: true\n }]\n }, {\n id: 2,\n label: 'Level two 2-2',\n disabled: true,\n children: [{\n id: 6,\n label: 'Level three 3-2-1'\n }, {\n id: 7,\n label: 'Level three 3-2-2',\n disabled: true\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label',\n disabled: 'disabled',\n },\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data3,props:s.defaultProps,"show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("p",[s._v("In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }]\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disabled'")]),s._v(",\n },\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Tree nodes can be initially expanded or checked")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("Use "),a("code",[s._v("default-expanded-keys")]),s._v(" and "),a("code",[s._v("default-checked-keys")]),s._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),a("code",[s._v("node-key")]),s._v(" is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":default-expanded-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":default-checked-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[5]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n
    \n get by node\n get by key\n set by node\n set by key\n reset\n
    \n\n\n',script:"\n export default {\n methods: {\n getCheckedNodes() {\n console.log(this.$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n console.log(this.$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n this.$refs.tree.setCheckedNodes([{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 9,\n label: 'Level three 1-1-1'\n }]);\n },\n setCheckedKeys() {\n this.$refs.tree.setCheckedKeys([3]);\n },\n resetChecked() {\n this.$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:s.getCheckedNodes}},[s._v("get by node")]),a("el-button",{on:{click:s.getCheckedKeys}},[s._v("get by key")]),a("el-button",{on:{click:s.setCheckedNodes}},[s._v("set by node")]),a("el-button",{on:{click:s.setCheckedKeys}},[s._v("set by key")]),a("el-button",{on:{click:s.resetChecked}},[s._v("reset")])],1)],1),a("p",[s._v("This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, "),a("code",[s._v("node-key")]),s._v(" is required.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"buttons"')]),s._v(">")]),s._v("\n "),a("span",{ -staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("get by node"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("get by key"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("set by node"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("set by key"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resetChecked"')]),s._v(">")]),s._v("reset"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n getCheckedNodes() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }]);\n },\n setCheckedKeys() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("]);\n },\n resetChecked() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n let id = 1000;\n\n export default {\n data() {\n return {\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n }\n },\n\n methods: {\n append(store, data) {\n const newChild = { id: id++, label: 'testtest', children: [] };\n store.append(newChild, data); // need change data by yourself\n data.children = data.children || [];\n data.children.push(newChild);\n },\n\n remove(store, node, data) {\n const parent = node.parent;\n const index = parent.data.children.findIndex(d => d.id === data.id);\n parent.data.children.splice(index, 1);\n store.remove(data); // need change data by yourself\n },\n\n renderContent(h, { node, data, store }) {\n return (\n \n \n {node.label}\n \n \n this.append(store, data) }>Append\n this.remove(store, node, data) }>Delete\n \n );\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,props:s.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("p",[s._v("Use "),a("code",[s._v("render-content")]),s._v(" to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":expand-on-click-node")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderContent"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n let id = "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(";\n\n export "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n data2: [{\n id: "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n children: [{\n id: "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n children: [{\n id: "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n id: "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n id: "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n children: [{\n id: "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n }, {\n id: "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n id: "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n children: [{\n id: "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n }, {\n id: "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n defaultProps: {\n children: "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n }\n },\n\n methods: {\n append(store, data) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" newChild = { id: id++, label: "),a("span",{staticClass:"hljs-string"},[s._v("'testtest'")]),s._v(", children: [] };\n store.append(newChild, data); "),a("span",{staticClass:"hljs-comment"},[s._v("// need change data by yourself")]),s._v("\n data.children = data.children || [];\n data.children.push(newChild);\n },\n\n remove(store, node, data) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" parent = node.parent;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" index = parent.data.children.findIndex(d => d.id === data.id);\n parent.data.children.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n store.remove(data); "),a("span",{staticClass:"hljs-comment"},[s._v("// need change data by yourself")]),s._v("\n },\n\n renderContent(h, { node, data, store }) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (\n \n \n {node.label}\n \n \n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".append(store, data) }>Append\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".remove(store, node, data) }>Delete\n \n );\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("Tree nodes can be filtered")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n\n',script:"\n export default {\n watch: {\n filterText(val) {\n this.$refs.tree2.filter(val);\n }\n },\n\n methods: {\n filterNode(value, data) {\n if (!value) return true;\n return data.label.indexOf(value) !== -1;\n }\n },\n\n data() {\n return {\n filterText: '',\n data2: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:s.filterText,callback:function(t){s.filterText=t},expression:"filterText"}}),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),a("p",[s._v("Invoke the "),a("code",[s._v("filter")]),s._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),a("code",[s._v("filter-node-method")]),s._v(" is required, and its value is the filtering method.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Filter keyword"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filter-tree"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-node-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterNode"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("watch")]),s._v(": {\n filterText(val) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n }\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n filterNode(value, data) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n }\n },\n\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Only one node among the same level can be expanded at one time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n data: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1',\n children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{ -staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"selectable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selectable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-leaf-node-in-lazy-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-leaf-node-in-lazy-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom leaf node in lazy mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"default-expanded-and-default-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default expanded and default checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checking-tree-nodes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checking tree nodes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-node-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom node content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"warning"},[a("p",[a("code",[s._v("Append")]),s._v(" and "),a("code",[s._v("remove")]),s._v(" do not change "),a("code",[s._v("data")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tree-node-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree node filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("tree data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("text displayed when data is void")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("unique identity key name for nodes, its value should be unique across the whole tree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("method for loading subtree data")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("render function for tree node")]),a("td",[s._v("Function(h, { node }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("whether current node is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("whether to expand all nodes by default")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("td",[s._v("whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.")]),a("td",[s._v("—")]),a("td",[s._v("true")]),a("td")]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("whether to expand father node when a child node is expanded")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("array of keys of initially expanded nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("whether node is selectable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("whether checked state of a node not affects its father and child nodes when "),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("array of keys of initially checked nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("this function will be executed on each node when use filter method. if return "),a("code",[s._v("false")]),s._v(", tree node will be hidden.")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether only one node among the same level can be expanded at one time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("horizontal indentation of nodes in adjacent levels in pixels")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of node object is used as the node's label")]),a("td",[s._v("string, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which node object is used as the node's subtree")]),a("td",[s._v("string, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of node object represents if node's checkbox is disabled")]),a("td",[s._v("boolean, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("isLeaf")]),a("td",[s._v("specify whether the node is a leaf node")]),a("td",[s._v("boolean, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Tree")]),s._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("filter all tree nodes, filtered nodes will be hidden")]),a("td",[s._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),a("tr",[a("td",[s._v("updateKeyChildren")]),a("td",[s._v("set new data to node, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(key, data) Accept two parameters: 1. key of node 2. new data")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of nodes")]),a("td",[s._v("Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("an array of nodes to be checked")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of node's keys")]),a("td",[s._v("(leafOnly) Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("set node to be checked or not, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not.")])]),a("tr",[a("td",[s._v("getCurrentKey")]),a("td",[s._v("return the highlight node's key (null if no node is highlighted)")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("getCurrentNode")]),a("td",[s._v("return the highlight node (null if no node is highlighted)")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("setCurrentKey")]),a("td",[s._v("set highlighted node by key, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(key) the node's key to be highlighted")])]),a("tr",[a("td",[s._v("setCurrentNode")]),a("td",[s._v("set highlighted node, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("(node) the node to be highlighted")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("triggers when a node is clicked")]),a("td",[s._v("three parameters: node object corresponding to the node clicked, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("triggers when the selected state of the node changes")]),a("td",[s._v("three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current node changes")]),a("td",[s._v("two parameters: node object corresponding to the current node, "),a("code",[s._v("node")]),s._v(" property of TreeNode")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("triggers when current node open")]),a("td",[s._v("three parameters: node object corresponding to the node opened, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("triggers when current node close")]),a("td",[s._v("three parameters: node object corresponding to the node closed, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])])])])}]}},function(s,t,a){s.exports=a(647)},function(s,t,a){function l(s){a(648)}var n=a(13)(null,a(650),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(649);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("b49e33d8",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography")]),a("p",[s._v("We create a font convention to ensure the best presentation across different platforms.")]),a("h3",{attrs:{id:"chinese-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chinese-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" Chinese Font")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"english-numberic-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#english-numberic-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" English / Numberic Font")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("font-family")]),s._v(': "'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Neue")]),s._v('",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(',"'),a("span",{staticClass:"hljs-selector-tag"},[s._v("PingFang")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("SC")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Hiragino")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Sans")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("GB")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Microsoft")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Arial")]),s._v(","),a("span",{staticClass:"hljs-selector-tag"},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"font-convention"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font Convention")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("Main Title")]),a("td",{staticClass:"h1"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("20px Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("Title")]),a("td",{staticClass:"h2"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("Small Title")]),a("td",{staticClass:"h3"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("Body")]),a("td",{staticClass:"text-regular"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("Body (small)")]),a("td",{staticClass:"text-small"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("Supplementary text")]),a("td",{staticClass:"text-smaller"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}]}},function(s,t,a){s.exports=a(652)},function(s,t,a){function l(s){a(653)}var n=a(13)(a(655),a(656),l,null,null);s.exports=n.exports},function(s,t,a){var l=a(654);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("149a4f96",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".upload-tip{color:#8492a6;font-size:12px;margin-top:7px}.demo-box{margin-bottom:24px}.demo-box .upload-demo{width:360px}.demo-box .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.demo-box .avatar-uploader .el-upload:hover{border-color:#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){"use strict";t.__esModule=!0,t.default={data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList2:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList3:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],imageUrl:"",dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(s,t){console.log(s,t)},beforeUpload:function(s){return!(s.size>4e7)||(console.warn(s.name+" is too large!"),!1)},handlePreview:function(s){console.log(s)},handlePictureCardPreview:function(s){this.dialogImageUrl=s.url,this.dialogVisible=!0},submitUpload:function(){this.$refs.upload.submit()},handleAvatarSuccess:function(s,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(s){var t="image/jpeg"===s.type,a=s.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),a||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Upload files by clicking or drag-and-drop")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("p",[s._v("Customize upload button type and text using "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n imageUrl: ''\n };\n },\n methods: {\n handleAvatarSuccess(res, file) {\n this.imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n const isJPG = file.type === 'image/jpeg';\n const isLt2M = file.size / 1024 / 1024 < 2;\n\n if (!isJPG) {\n this.$message.error('Avatar picture must be JPG format!');\n }\n if (!isLt2M) {\n this.$message.error('Avatar picture size can not exceed 2MB!');\n }\n return isJPG && isLt2M;\n }\n }\n }\n",style:"\n .avatar-uploader .el-upload {\n border: 1px dashed #d9d9d9;\n border-radius: 6px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n .avatar-uploader .el-upload:hover {\n border-color: #409EFF;\n }\n .avatar-uploader-icon {\n font-size: 28px;\n color: #8c939d;\n width: 178px;\n height: 178px;\n line-height: 178px;\n text-align: center;\n }\n .avatar {\n width: 178px;\n height: 178px;\n display: block;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?a("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar-uploader"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":show-file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-success")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleAvatarSuccess"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":before-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1px")]),s._v(" dashed "),a("span",{staticClass:"hljs-number"},[s._v("#d9d9d9")]),s._v(";\n "),a("span",{ -staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": relative;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("overflow")]),s._v(": hidden;\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":hover")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#409EFF")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader-icon")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("28px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#8c939d")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("imageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleAvatarSuccess(res, file) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{staticClass:"hljs-string"},[s._v("'image/jpeg'")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" < "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(";\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isJPG) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Avatar picture must be JPG format!'")]),s._v(");\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isLt2M) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Avatar picture size can not exceed 2MB!'")]),s._v(");\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" isJPG && isLt2M;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n\n\n \n\n\n',script:"\n export default {\n data() {\n return {\n dialogImageUrl: '',\n dialogVisible: false\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePictureCardPreview(file) {\n this.dialogImageUrl = file.url;\n this.dialogVisible = true;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),a("el-dialog",{attrs:{size:"tiny"},model:{value:s.dialogVisible,callback:function(t){s.dialogVisible=t},expression:"dialogVisible"}},[a("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture-card"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePictureCardPreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100%"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogImageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("alt")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogImageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePictureCardPreview(file) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList2")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList3: [{\n name: 'food.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }, {\n name: 'food2.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }]\n };\n },\n methods: {\n handleChange(file, fileList) {\n this.fileList3 = fileList.slice(-3);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n }]\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(file, fileList) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{staticClass:"hljs-number"},[s._v("-3")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("You can drag your file to a certain area to upload it.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Drop file here or click to upload
    \n
    jpg/png files with a size less than 500kb
    \n    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,multiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("Drop file here or "),a("em",[s._v("click to upload")])]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("drag")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__text"')]),s._v(">")]),s._v("Drop file here or "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),s._v("click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n select file\n upload to server\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n methods: {\n submitUpload() {\n this.$refs.upload.submit();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[a("el-button",{attrs:{size:"small",type:"primary"},slot:"trigger"},[s._v("select file")]),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("upload to server")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":auto-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"trigger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("select file"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"submitUpload"')]),s._v(">")]),s._v("upload to server"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitUpload() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.upload.submit();\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"click-to-upload-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Click to upload files")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"user-avatar-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" User avatar upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("before-upload")]),s._v(" hook to limit the upload file format and size.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"photo-wall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[s._v("¶")]),s._v(" Photo Wall")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("list-type")]),s._v(" to change the fileList style.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filelist-with-thumbnail"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[s._v("¶")]),s._v(" FileList with thumbnail")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"file-list-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[s._v("¶")]),s._v(" File list control")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("on-change")]),s._v(" hook function to control upload file list")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"drag-to-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Drag to upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"manual-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Manual upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("action")]),a("td",[s._v("required, request URL")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("headers")]),a("td",[s._v("request headers")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether uploading multiple files is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("data")]),a("td",[s._v("additions options of request")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("key name for uploaded file")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("file")])]),a("tr",[a("td",[s._v("with-credentials")]),a("td",[s._v("whether cookies are sent")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-file-list")]),a("td",[s._v("whether to show the uploaded file list")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("drag")]),a("td",[s._v("whether to activate drag and drop mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("accept")]),a("td",[s._v("accepted "),a("a",{ -attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("file types")]),s._v(", will not work when "),a("code",[s._v("thumbnail-mode")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-preview")]),a("td",[s._v("hook function when clicking the uploaded files")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-remove")]),a("td",[s._v("hook function when files are removed")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-success")]),a("td",[s._v("hook function when uploaded successfully")]),a("td",[s._v("function(response, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-error")]),a("td",[s._v("hook function when some errors occurs")]),a("td",[s._v("function(err, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-progress")]),a("td",[s._v("hook function when some progress occurs")]),a("td",[s._v("function(event, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-change")]),a("td",[s._v("hook function when select file or upload file success or upload file fail")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-upload")]),a("td",[s._v("hook function before uploading with the file to be uploaded as its parameter. If "),a("code",[s._v("false")]),s._v(" is returned or a "),a("code",[s._v("Promise")]),s._v(" is returned and then is rejected, uploading will be aborted")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("thumbnail-mode")]),a("td",[s._v("whether thumbnail is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("file-list")]),a("td",[s._v("default uploaded files, e.g. [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[]")])]),a("tr",[a("td",[s._v("list-type")]),a("td",[s._v("type of fileList")]),a("td",[s._v("string")]),a("td",[s._v("text/picture/picture-card")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("auto-upload")]),a("td",[s._v("whether to auto upload file")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("http-request")]),a("td",[s._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable upload")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Methods Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearFiles")]),a("td",[s._v("clear the uploaded file list (this method is not supported in the "),a("code",[s._v("before-upload")]),s._v(" hook)")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("abort")]),a("td",[s._v("cancel upload request")]),a("td",[s._v("（ file: fileList's item ）")])])])])}]}}])); \ No newline at end of file diff --git a/2.0/index.html b/2.0/index.html index 7d09e73d3..681a9b637 100644 --- a/2.0/index.html +++ b/2.0/index.html @@ -6,13 +6,13 @@ Element - +
    - + - +