diff --git a/README.md b/README.md index b09e7395f1aaec87e274f36473797a4c832e3abb..42da874ced8130a9a1b4bb404aa76eb70b94bf56 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,9 @@ **注æ„:该项目目å‰ä½¿ç”¨element-ui@1.3.3版本,所以最低兼容 Vue 2.3.0** ## å‰è¨€ -> è¿™åŠå¹´æ¥ä¸€ç›´åœ¨ç”¨vue写管ç†åŽå°ï¼Œç›®å‰åŽå°å·²ç»æœ‰ä¸ƒå多个页é¢ï¼Œåå‡ ç§æƒé™ï¼Œä½†ç»´æŠ¤æˆæœ¬ä¾ç„¶å¾ˆä½Žï¼Œæ‰€ä»¥å‡†å¤‡å¼€æºåˆ†äº«ä¸€ä¸‹åŽå°å¼€å‘çš„ç»éªŒå’Œæˆæžœã€‚ç›®å‰çš„æŠ€æœ¯æ ˆä¸»è¦çš„采用vue+element+axios.由于是个人项目,所以数æ®è¯·æ±‚都是用了mockjs模拟。注æ„ï¼šåœ¨æ¬¡é¡¹ç›®åŸºç¡€ä¸Šæ”¹é€ å¼€å‘时请移除mock文件。 +> è¿™åŠå¹´æ¥ä¸€ç›´åœ¨ç”¨vue写管ç†åŽå°ï¼Œç›®å‰åŽå°å·²ç»æœ‰ç™¾æ¥ä¸ªä¸ªé¡µé¢ï¼Œåå‡ ç§æƒé™ï¼Œä½†ç»´æŠ¤æˆæœ¬ä¾ç„¶å¾ˆä½Žï¼Œæ‰€ä»¥å‡†å¤‡å¼€æºåˆ†äº«ä¸€ä¸‹åŽå°å¼€å‘çš„ç»éªŒå’Œæˆæžœã€‚ç›®å‰çš„æŠ€æœ¯æ ˆä¸»è¦çš„采用vue+element+axiosç”±webpack2打包.由于是个人项目,所以数æ®è¯·æ±‚都是用了mockjs模拟。注æ„ï¼šåœ¨æ¬¡é¡¹ç›®åŸºç¡€ä¸Šæ”¹é€ å¼€å‘时请移除mock文件。 -åŽç»ä¼šå‡ºä¸€ç³»åˆ—的教程é…å¥—æ–‡ç« ï¼Œå¦‚å¦‚ä½•ä»Žé›¶æž„å»ºåŽå°é¡¹ç›®æ¡†æž¶ï¼Œå¦‚何åšå®Œæ•´çš„用户系统(如æƒé™éªŒè¯ï¼ŒäºŒæ¬¡ç™»å½•ç‰ï¼‰ï¼Œå¦‚何二次开å‘组件(如富文本),如何整åˆä¸ƒç‰›ç‰ç‰æ–‡ç« ,å„ç§åŽå°å¼€å‘ç»éªŒç‰ç‰ã€‚莫急~~ - -相应需求,开了一个qq群 591724180 æ–¹ä¾¿å¤§å®¶äº¤æµ +写了一个系列的教程é…å¥—æ–‡ç« ï¼Œå¦‚ä½•ä»Žé›¶æž„å»ºåŽä¸€ä¸ªå®Œæ•´çš„åŽå°é¡¹ç›®: - [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) - [æ‰‹æ‘¸æ‰‹ï¼Œå¸¦ä½ ç”¨ vue æ’¸åŽå° 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) @@ -20,12 +18,14 @@ - [æ‰‹æ‘¸æ‰‹ï¼Œå¸¦ä½ ç”¨ vue æ’¸åŽå° 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) - [æ‰‹æ‘¸æ‰‹ï¼Œå¸¦ä½ å°è£…一个vue component](https://segmentfault.com/a/1190000009090836) + 相应需求,开了一个qq群 591724180 æ–¹ä¾¿å¤§å®¶äº¤æµ + **å¦‚æœ‰é—®é¢˜è¯·å…ˆçœ‹ä¸Šè¿°æ–‡ç« å’ŒWiki,è‹¥ä¸èƒ½æ»¡è¶³ï¼Œæ¬¢è¿Žissueå’Œpr~** - + **该项目并ä¸æ˜¯ä¸€ä¸ªè„šæ‰‹æž¶ï¼Œæ›´å€¾å‘于是一个集æˆè§£å†³æ–¹æ¡ˆæ–¹æ¡ˆ** - + **该项目ä¸æ”¯æŒä½Žç‰ˆæœ¬æ¸¸è§ˆå™¨ï¼Œæœ‰éœ€æ±‚è¯·è‡ªè¡Œæ·»åŠ polyfill[详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)** - + ## 功能 - 登录/注销 @@ -47,6 +47,7 @@ - table example - 动æ€table example - 拖拽table example +- 内è”编辑table example - form example - 多环境å‘布 - dashboard diff --git a/src/components/Charts/mixchart.vue b/src/components/Charts/mixchart.vue index c7c9fe5877079eaa92768e44225bb9c82f84e6f5..04904df42fa235017860334abdc6ccf1612154f3 100644 --- a/src/components/Charts/mixchart.vue +++ b/src/components/Charts/mixchart.vue @@ -51,7 +51,6 @@ backgroundColor: '#344b58', title: { text: '统计', - subtext: 'from http://gallery.echartsjs.com', x: '4%', textStyle: { color: '#fff', diff --git a/src/views/charts/index.vue b/src/views/charts/index.vue index cce1dc39ec049be8858ce29e323dc819b2c77084..7ca2a2859b839325f920e1778a6fb6f413fe4fbd 100644 --- a/src/views/charts/index.vue +++ b/src/views/charts/index.vue @@ -1,7 +1,7 @@ <template> <div class="components-container" > <code> - 这里的所有的图表都基于echarts,实例代ç æ¥æº<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'>gallery</a><br/>其实echartså°è£…的很好了,用vueå°è£…是很简å•çš„事情,建议大家自己æ¥å°è£…。 + 这里的所有的图表都基于ECharts,实例代ç æ¥æº<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'>gallery</a><br/>其实EChartså°è£…的很好了,用vueå°è£…是很简å•çš„事情,建议大家自己æ¥å°è£…。<a target='_blank' class='lin' href="https://segmentfault.com/a/1190000009762198#articleHeader16">相关教程</a> </code> </div> </template> diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue index f0d066c320c28dc3f741dd0401f3d35f9d24f2d6..768407152fe58f6087ba6afcad5e55d5b94b7bb9 100644 --- a/src/views/charts/keyboard.vue +++ b/src/views/charts/keyboard.vue @@ -1,14 +1,13 @@ <template> <div class="components-container" style='height:100vh'> <div class='chart-container'> - <keyboardChart height='100%' width='100%' /> + <keyboardChart height='100%' width='100%' /> </div> - </div> </template> + <script> import keyboardChart from 'components/Charts/keyboard'; - export default { components: { keyboardChart } }; @@ -16,9 +15,9 @@ <style scoped> .chart-container{ - position: relative; - width: 100%; - height: 90%; + position: relative; + width: 100%; + height: 90%; } </style> diff --git a/src/views/charts/keyboard2.vue b/src/views/charts/keyboard2.vue index d46c35895ddee20f441393c3899b1a749e4df45e..964a1949cd8e1de6895ba56ad657f6299812af9d 100644 --- a/src/views/charts/keyboard2.vue +++ b/src/views/charts/keyboard2.vue @@ -1,14 +1,13 @@ <template> <div class="components-container" style='height:100vh'> <div class='chart-container'> - <keyboardChart2 id='apple' height='100%' width='100%' /> + <keyboardChart2 id='apple' height='100%' width='100%' /> </div> - </div> </template> + <script> import keyboardChart2 from 'components/Charts/keyboard2'; - export default { components: { keyboardChart2 } }; @@ -16,9 +15,9 @@ <style scoped> .chart-container{ - position: relative; - width: 100%; - height: 90%; + position: relative; + width: 100%; + height: 90%; } </style> diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue index 5992c50283ad31097308d372737f5649183f437b..975cf91569f15223a48e8afded996b7a95d07d18 100644 --- a/src/views/charts/line.vue +++ b/src/views/charts/line.vue @@ -1,16 +1,13 @@ <template> <div class="components-container" style='height:100vh'> - https://github.com/ecomfe/echarts/blob/master/index.js - http://echarts.baidu.com/tutorial.html <div class='chart-container'> - <lineMarker height='100%' width='100%' /> + <lineMarker height='100%' width='100%' /> </div> - </div> </template> + <script> import lineMarker from 'components/Charts/lineMarker'; - export default { components: { lineMarker } }; @@ -18,9 +15,9 @@ <style scoped> .chart-container{ - position: relative; - width: 100%; - height: 80%; + position: relative; + width: 100%; + height: 80%; } </style> diff --git a/src/views/charts/mixchart.vue b/src/views/charts/mixchart.vue index 8b2afd02e6c1ca9e2fd8963bcdbb44620fa2c169..4a0e6a0a0807bb8640a8096ff9ea398121f13d96 100644 --- a/src/views/charts/mixchart.vue +++ b/src/views/charts/mixchart.vue @@ -1,14 +1,13 @@ <template> <div class="components-container" style='height:100vh'> <div class='chart-container'> - <mixchart id='apple' height='100%' width='100%' /> + <mixchart id='apple' height='100%' width='100%' /> </div> - </div> </template> + <script> import mixchart from 'components/Charts/mixchart'; - export default { components: { mixchart } }; @@ -16,10 +15,10 @@ <style scoped> .chart-container{ - position: relative; - width: 100%; - height: 90%; - padding-bottom: 40px; + position: relative; + width: 100%; + height: 90%; + padding-bottom: 40px; } </style> diff --git a/src/views/components/countTo.vue b/src/views/components/countTo.vue index a2c920ecb015b80b765b5e594fadf39e01207c89..f0d6cb42015620a6be0372b1704e2cffc2f67456 100644 --- a/src/views/components/countTo.vue +++ b/src/views/components/countTo.vue @@ -1,8 +1,8 @@ <template> <div class="components-container"> - <code>countTo 组件 <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>线上地å€</a></code> + <code> <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>countTo component</a></code> - <count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals' + <count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals' :separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay='false' /> <div style='margin-left: 25%;margin-top: 40px;'> <label class="label" for="startValInput">startVal: <input type="number" v-model.number='setStartVal' name='startValInput' /></label> @@ -20,9 +20,9 @@ :separator='{{_separator}}' :prefix='{{_prefix}}' :suffix='{{_suffix}}' :autoplay=false></code> </div> </template> + <script> import countTo from 'vue-count-to'; - export default { components: { countTo }, data() { diff --git a/src/views/components/dndlist.vue b/src/views/components/dndlist.vue index 80984340e378b7a86ff363b01719958fca33ced3..d5b8295078f8143856c8315423513e2aaafcdade 100644 --- a/src/views/components/dndlist.vue +++ b/src/views/components/dndlist.vue @@ -1,6 +1,6 @@ <template> <div class="components-container"> - <code>拖拽https://github.com/SortableJS/Vue.Draggable 项目:Vue.Draggable</code> + <code>drag-list base on <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a></code> <div class="editor-container"> <DndList :list1="list1" :list2="list2" list1Title="头æ¡åˆ—表" list2Title="æ–‡ç« æ± " /> </div> diff --git a/src/views/components/index.vue b/src/views/components/index.vue index e0b4c0deedbb52260f155ce53bdaed449ca67a4d..661c483595d8eccff8d0fcc6b3c51fc497f5697c 100644 --- a/src/views/components/index.vue +++ b/src/views/components/index.vue @@ -1,7 +1,7 @@ <template> <div class="components-container"> - <code>这里暂时列出了自己在项目ä¸è‡ªå·±å°è£…和用到的组件,如有补充å¯ä»¥æ<a href='https://github.com/PanJiaChen/vue-element-admin/issues' target='_blank'>issue</a><br/> - 我个人崇尚自己å°è£…ç»„ä»¶ï¼Œå› ä¸ºå¾ˆå¤šç»„ä»¶ä¼šå’Œä¸šåŠ¡åŽé«˜åº¦çš„耦åˆï¼Œå¾ˆå¤šæ—¶å€™ç¬¬ä¸‰æ–¹å°è£…是满足ä¸äº†éœ€æ±‚的,如有需è¦å¯ä»¥çœ‹æ¥¼ä¸»ä¹‹å‰å†™è¿‡çš„一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>æ–‡ç« </a> + <code>这里暂时列出了自己在项目ä¸ç”¨åˆ°çš„组件和一些自己å°è£…的组件,如有补充å¯ä»¥æ<a target='_blank' href='https://github.com/PanJiaChen/vue-element-admin/issues'> issue </a><br/> + 我个人崇尚自己å°è£…ç»„ä»¶ï¼Œå› ä¸ºå¾ˆå¤šç»„ä»¶ä¼šå’Œä¸šåŠ¡åŽé«˜åº¦çš„耦åˆï¼Œè€Œä¸”第三方å°è£…的组件çµæ´»æ€§å¯æŽ§æ€§éƒ½ä¸é«˜ï¼Œå¦‚有需è¦å¯ä»¥çœ‹æ¥¼ä¸»ä¹‹å‰å†™è¿‡çš„一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>æ–‡ç« </a> </code> </div> </template> diff --git a/src/views/components/jsoneditor.vue b/src/views/components/jsoneditor.vue index ca8142a59ffa778927f39482a1f6d81b4fbd417e..1391394bcfabcd8ec89f89eab0189bd2f3a91d26 100644 --- a/src/views/components/jsoneditor.vue +++ b/src/views/components/jsoneditor.vue @@ -1,11 +1,12 @@ <template> <div class="components-container" style='height:100vh'> - <code>æœ‰æ ¡éªŒ</code> + <code>jsonEditor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>,lint base on json-lint </code> <div class="editor-container"> <json-editor ref="jsonEditor" v-model="value"></json-editor> </div> </div> </template> + <script> import jsonEditor from 'components/jsonEditor'; const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产å“"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能æºåŒ–å·¥"}]'; @@ -21,8 +22,8 @@ <style scoped> .editor-container{ - position: relative; - height: 100%; + position: relative; + height: 100%; } </style> diff --git a/src/views/components/markdown.vue b/src/views/components/markdown.vue index 6893729d53e2f4de46b4b9a662bcb823c350a82a..3ebb371add42a6b41a66dcada6b44a60ea036f5b 100644 --- a/src/views/components/markdown.vue +++ b/src/views/components/markdown.vue @@ -1,21 +1,21 @@ <template> <div class="components-container"> - <code>å…¬å¸åšçš„åŽå°ä¸»è¦æ˜¯ä¸€ä¸ªcms系统,公å¸ä¹Ÿæ˜¯ä»¥è‡ªåª’ä½“ä¸ºæ ¸å¿ƒçš„ï¼Œæ‰€ä»¥å¯Œæ–‡æœ¬æ˜¯åŽå°å¾ˆæ ¸å¿ƒçš„功能。在选择富文本的过程ä¸ä¹Ÿèµ°äº†ä¸å°‘的弯路,市é¢ä¸Šå¸¸è§çš„富文本都基本用过了,最终选择了tinymce</code> + <code>Markdown 我们这里选用了 <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ,简å•çš„用vueå°è£…了一下<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader14'> ç›¸å…³æ–‡ç« </a></code> <div class="editor-container"> - <MdEditor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></MdEditor> + <MdEditor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></MdEditor> </div> <el-button @click='markdown2Html' style="margin-top:80px;" type="primary">转为HTML<i class="el-icon-document el-icon--right"></i></el-button> <div v-html="html"></div> </div> </template> + <script> import MdEditor from 'components/MdEditor'; - export default { components: { MdEditor }, data() { return { - content: 'Simplemde', + content: '## Simplemde', html: '' } }, diff --git a/src/views/errlog/index.vue b/src/views/errlog/index.vue index bc0be8fcdc89172aa63d0d17c2f75a3f31c66cf6..1d478d4e1f0e962fae97fb639326ee30770a337e 100644 --- a/src/views/errlog/index.vue +++ b/src/views/errlog/index.vue @@ -1,26 +1,19 @@ <template> <div class="errPage-container"> - <!--error code--> - <err-code/> - <!--error code--> + <err-code/> + <h3>请点击å³ä¸Šè§’bugå°å›¾è¡¨</h3> - <code> + <code> 现在的管ç†åŽå°åŸºæœ¬éƒ½æ˜¯spaçš„å½¢å¼äº†ï¼Œå®ƒå¢žå¼ºäº†ç”¨æˆ·ä½“验,但åŒæ—¶ä¹Ÿä¼šæ€Žå¢žåŠ 页é¢å‡ºé—®é¢˜çš„å¯èƒ½æ€§ï¼Œå¯èƒ½ä¸€ä¸ªå°å°çš„ç–忽就导致整个页é¢çš„æ»é”。好在Vue官网æ供了一个方法æ¥æ•èŽ·å¤„ç†å¼‚常 </code> <a href="#"><img src='../../../documentImg/code1.png'></a> - </div> </template> + <script> import errCode from './errcode'; - // import code1Img from export default { components: { errCode }, - data() { - return { - - } - }, methods: { back() { this.$router.go(-1) @@ -28,6 +21,7 @@ } }; </script> + <style scoped> .errPage-container{ padding: 30px; diff --git a/src/views/error/401.vue b/src/views/error/401.vue index f19ed1ff54548a668126135ee504afada11b317e..bddfc1deb7438831362bd8e07410205d35de9b83 100644 --- a/src/views/error/401.vue +++ b/src/views/error/401.vue @@ -4,7 +4,7 @@ <el-row> <el-col :span="12"> <h1 class="text-jumbo text-ginormous">Oops!</h1> - gifæ¥æº<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> é¡µé¢ + gifæ¥æº<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> é¡µé¢ <h2>ä½ æ²¡æœ‰æƒé™åŽ»è¯¥é¡µé¢</h2> <h6>如有ä¸æ»¡è¯·è”ç³»ä½ é¢†å¯¼</h6> <ul class="list-unstyled"> @@ -26,9 +26,9 @@ </el-dialog> </div> </template> + <script> import errGif from 'assets/401.gif'; - export default { data() { return { @@ -50,38 +50,38 @@ </script> <style rel="stylesheet/scss" lang="scss" scoped> - .errPage-container { - width: 800px; - margin: 100px auto; - .pan-back-btn { - background: #008489; - color: #fff; - } - .pan-gif { - margin: 0 auto; - display: block; - } - .pan-img{ - display: block; - margin: 0 auto; - } - .text-jumbo { - font-size: 60px; - font-weight: 700; - color: #484848; - } - .list-unstyled { - font-size: 14px; - li { - padding-bottom: 5px; - } - a { - color: #008489; - text-decoration: none; - &:hover { - text-decoration: underline; - } - } + .errPage-container { + width: 800px; + margin: 100px auto; + .pan-back-btn { + background: #008489; + color: #fff; + } + .pan-gif { + margin: 0 auto; + display: block; + } + .pan-img { + display: block; + margin: 0 auto; + } + .text-jumbo { + font-size: 60px; + font-weight: 700; + color: #484848; + } + .list-unstyled { + font-size: 14px; + li { + padding-bottom: 5px; + } + a { + color: #008489; + text-decoration: none; + &:hover { + text-decoration: underline; } + } } + } </style> diff --git a/src/views/error/404.vue b/src/views/error/404.vue index 1442209509e2425c12dadaef2832c9a4b7a88c31..9122a895f8699154b9db2339c9228c04599435d7 100644 --- a/src/views/error/404.vue +++ b/src/views/error/404.vue @@ -9,7 +9,7 @@ </div> <div class="bullshit"> <div class="bullshit__oops">OOPS!</div> - <div class="bullshit__info">版æƒæ‰€æœ‰<a class='link-type' href='https://wallstreetcn.com' target='_blank'>åŽå°”è¡—è§é—»</a></div> + <div class="bullshit__info">版æƒæ‰€æœ‰<a class='link-type' href='https://wallstreetcn.com' target='_blank'>åŽå°”è¡—è§é—»</a></div> <div class="bullshit__headline">{{ message }}</div> <div class="bullshit__info">请检查您输入的网å€æ˜¯å¦æ£ç¡®ï¼Œè¯·ç‚¹å‡»ä»¥ä¸‹æŒ‰é’®è¿”回主页或者å‘é€é”™è¯¯æŠ¥å‘Š</div> <a href="/" class="bullshit__return-home">返回首页</a> @@ -17,6 +17,7 @@ </div> </div> </template> + <script> export default { computed: { @@ -26,6 +27,7 @@ } } </script> + <style rel="stylesheet/scss" lang="scss" scoped> .wscn-http404 { position: relative; diff --git a/src/views/example/table/dynamictable.vue b/src/views/example/table/dynamictable.vue index b2b844fce0a79b46018b0dd82546f79443ec5a92..38ab0b33441cc4608d0ad2816bfaadddd98453d5 100644 --- a/src/views/example/table/dynamictable.vue +++ b/src/views/example/table/dynamictable.vue @@ -1,7 +1,7 @@ <template> <div class="app-container"> <div class="filter-container"> - <el-checkbox-group v-model="formThead"> + <el-checkbox-group v-model="formThead"> <el-checkbox label="apple">apple</el-checkbox> <el-checkbox label="banana">banana</el-checkbox> <el-checkbox label="orange">orange</el-checkbox> @@ -18,22 +18,21 @@ </el-table> </div> </template> -<script> - -export default { - data() { - return { - tableData: [{ - name: 'æ°´æžœ', - list: [{ name: 'apple', value: 10 }, { name: 'banana', value: 20 }, { name: 'orange', value: 20 }] - }, { - name: 'æ°´æžœ2', - list: [{ name: 'apple2', value: 12 }, { name: 'banana2', value: 22 }, { name: 'orange', value: 20 }] - }], - formThead: ['apple', 'banana'] +<script> + export default { + data() { + return { + tableData: [{ + name: 'æ°´æžœ', + list: [{ name: 'apple', value: 10 }, { name: 'banana', value: 20 }, { name: 'orange', value: 20 }] + }, { + name: 'æ°´æžœ2', + list: [{ name: 'apple2', value: 12 }, { name: 'banana2', value: 22 }, { name: 'orange', value: 20 }] + }], + formThead: ['apple', 'banana'] + } } - } -}; + }; </script> diff --git a/src/views/example/table/table.vue b/src/views/example/table/table.vue index 0096237bc693f12f04f93d7950b2e64b4a4e8fec..2bbf4cc28165ad9de2218d43d93ccf61734505a6 100644 --- a/src/views/example/table/table.vue +++ b/src/views/example/table/table.vue @@ -22,10 +22,10 @@ <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">æœç´¢</el-button> <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">æ·»åŠ </el-button> <el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button> - <el-checkbox class="filter-item" @change='tableKey=tableKey+1' v-model="showAuditor">æ˜¾ç¤ºå®¡æ ¸äºº</el-checkbox> + <el-checkbox class="filter-item" @change='tableKey=tableKey+1' v-model="showAuditor">æ˜¾ç¤ºå®¡æ ¸äºº</el-checkbox> </div> - <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> + <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> <el-table-column align="center" label="åºå·" width="65"> <template scope="scope"> @@ -58,10 +58,9 @@ </template> </el-table-column> - <el-table-column width="80px" label="é‡è¦æ€§"> <template scope="scope"> - <wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" /> + <wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" /> </template> </el-table-column> @@ -71,28 +70,28 @@ </template> </el-table-column> - <el-table-column class-name="status-col" label="状æ€" width="90"> + <el-table-column class-name="status-col" label="状æ€" width="90"> <template scope="scope"> <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> </template> </el-table-column> - <el-table-column align="center" label="æ“作" width="150"> + <el-table-column align="center" label="æ“作" width="150"> <template scope="scope"> <el-button v-if="scope.row.status!='published'" size="small" type="success" @click="handleModifyStatus(scope.row,'published')">å‘布 </el-button> <el-button v-if="scope.row.status!='draft'" size="small" @click="handleModifyStatus(scope.row,'draft')">è‰ç¨¿ </el-button> <el-button v-if="scope.row.status!='deleted'" size="small" type="danger" @click="handleModifyStatus(scope.row,'deleted')">åˆ é™¤ - </el-button> + </el-button> </template> </el-table-column> </el-table> <div v-show="!listLoading" class="pagination-container"> - <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" - :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> + <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" + :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> @@ -138,14 +137,14 @@ </el-dialog> <el-dialog title="阅读数统计" :visible.sync="dialogPvVisible" size="small"> - <el-table :data="pvData" border fit highlight-current-row style="width: 100%"> - <el-table-column prop="key" label="æ¸ é“"> </el-table-column> - <el-table-column prop="pv" label="pv"> </el-table-column> + <el-table :data="pvData" border fit highlight-current-row style="width: 100%"> + <el-table-column prop="key" label="æ¸ é“"> </el-table-column> + <el-table-column prop="pv" label="pv"> </el-table-column> </el-table> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogPvVisible = false">ç¡® 定</el-button> </span> - </el-dialog > + </el-dialog> </div> </template> diff --git a/src/views/excel/index.vue b/src/views/excel/index.vue index 17a728fec8a66bc30acdb96e274be8a6af30fc88..8adf0bbd338e5ecf63db46377c23c289d39e722c 100644 --- a/src/views/excel/index.vue +++ b/src/views/excel/index.vue @@ -32,6 +32,7 @@ </el-table> </div> </template> + <script> import { getList } from 'api/article'; export default { diff --git a/src/views/layout/AppMain.vue b/src/views/layout/AppMain.vue index e6867d8fbc8fb20ab9575b15cf132b2a139bd6e8..d296a33f1fa67e10929511e97ab096edd6b15da2 100644 --- a/src/views/layout/AppMain.vue +++ b/src/views/layout/AppMain.vue @@ -11,9 +11,7 @@ name: 'AppMain', computed: { key() { - return this.$route.name !== undefined - ? this.$route.name + +new Date() - : this.$route + +new Date() + return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date() } } } diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue index d60811ff57a7b6a4e99a090db3a3d2e5aff8726b..c59614dfcfbc6c2374885bc5127b89c819b94c3b 100644 --- a/src/views/layout/Layout.vue +++ b/src/views/layout/Layout.vue @@ -1,7 +1,7 @@ <template> <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}"> <div class="sidebar-wrapper"> - <Sidebar class="sidebar-container"/> + <Sidebar class="sidebar-container" /> </div> <div class="main-container"> <Navbar/> @@ -27,9 +27,9 @@ } } </script> + <style rel="stylesheet/scss" lang="scss" scoped> @import "src/styles/mixin.scss"; - .app-wrapper { @include clearfix; position: relative; diff --git a/src/views/layout/Levelbar.vue b/src/views/layout/Levelbar.vue index 382d9fd1d559bf36cc432e743638efef156a7357..cb40084db89b5ebbfd306102e36a58fdf2397f37 100644 --- a/src/views/layout/Levelbar.vue +++ b/src/views/layout/Levelbar.vue @@ -34,6 +34,7 @@ } } </script> + <style rel="stylesheet/scss" lang="scss" scoped> .app-levelbar.el-breadcrumb { display: inline-block; diff --git a/src/views/layout/Navbar.vue b/src/views/layout/Navbar.vue index 9ac58aa287b5560d0af1a22d816ab5f5a2c595a3..5e156663d41bcadd74d09b5f4d109ca91f3189bb 100644 --- a/src/views/layout/Navbar.vue +++ b/src/views/layout/Navbar.vue @@ -6,15 +6,15 @@ <el-dropdown class="avatar-container" trigger="click"> <div class="avatar-wrapper"> <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'"> - <i class="el-icon-caret-bottom"/> + <i class="el-icon-caret-bottom" /> </div> <el-dropdown-menu class="user-dropdown" slot="dropdown"> - <router-link class='inlineBlock' to="/"> + <router-link class='inlineBlock' to="/"> <el-dropdown-item> 首页 </el-dropdown-item> </router-link> - <router-link class='inlineBlock' to="/admin/profile"> + <router-link class='inlineBlock' to="/admin/profile"> <el-dropdown-item> 设置 </el-dropdown-item> @@ -62,6 +62,7 @@ } } </script> + <style rel="stylesheet/scss" lang="scss" scoped> .navbar { height: 50px; diff --git a/src/views/layout/Sidebar.vue b/src/views/layout/Sidebar.vue index 36d02aacfb97632b0fbe70826f9c2360fc6bdf4f..169b168edc7d60eaad52cd0c938c8c8605a95172 100644 --- a/src/views/layout/Sidebar.vue +++ b/src/views/layout/Sidebar.vue @@ -16,6 +16,7 @@ } } </script> + <style rel="stylesheet/scss" lang="scss" scoped> .el-menu { min-height: 100%; diff --git a/src/views/layout/SidebarItem.vue b/src/views/layout/SidebarItem.vue index 2d9b85cfa0c45b9e3c6a2f346cc9e942c09a671f..9a293fffc4c4c7ab989d38724209972a5fd3242a 100644 --- a/src/views/layout/SidebarItem.vue +++ b/src/views/layout/SidebarItem.vue @@ -34,6 +34,7 @@ } } </script> + <style rel="stylesheet/scss" lang="scss" scoped> .wscn-icon { margin-right: 10px; diff --git a/src/views/permission/index.vue b/src/views/permission/index.vue index d11e8cd4ade345a8432fc4247b83da73e06a31e4..c31593956cc4269ce23cc2418e7025ab011ad8de 100644 --- a/src/views/permission/index.vue +++ b/src/views/permission/index.vue @@ -1,10 +1,10 @@ <template> <div class="app-container"> - <div style='margin-bottom:15px;'>ä½ çš„æƒé™ï¼š {{roles}}</div> - 切æ¢æƒé™ï¼š - <el-radio-group v-model="role"> - <el-radio-button label="editor"></el-radio-button> - </el-radio-group> + <div style='margin-bottom:15px;'>ä½ çš„æƒé™ï¼š {{roles}}</div> + 切æ¢æƒé™ï¼š + <el-radio-group v-model="role"> + <el-radio-button label="editor"></el-radio-button> + </el-radio-group> </div> </template> diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue index 52cf7f4c70ba413db29af32b5df38385d661667e..071f1c5144119ce606f48e6bd3ffeded1c9ef564 100644 --- a/src/views/theme/index.vue +++ b/src/views/theme/index.vue @@ -76,17 +76,17 @@ export default { </script> <style scoped> -.box-card{ - width: 400px; - margin: 20px auto; -} -.block{ - padding: 30px 24px; -} -.alert-item{ - margin-bottom: 10px; -} -.tag-item{ - margin-right: 15px; -} + .box-card{ + width: 400px; + margin: 20px auto; + } + .block{ + padding: 30px 24px; + } + .alert-item{ + margin-bottom: 10px; + } + .tag-item{ + margin-right: 15px; + } </style>