lint code

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
       }
     }],
     "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
     'accessor-pairs': 2,
     'arrow-spacing': [2, {
       'before': true,

src/components/Charts/keyboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"/>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>

src/components/Charts/lineMarker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"/>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>

src/components/Charts/mixChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"/>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>

src/components/DndList/index.vue

@@ -4,7 +4,9 @@
       <h3>{{ list1Title }}</h3>
       <draggable :list="list1" :options="{group:'article'}" class="dragArea">
         <div v-for="element in list1" :key="element.id" class="list-complete-item">
-          <div class="list-complete-item-handle">{{ element.id }}[{{ element.author }}] {{ element.title }}</div>
+          <div class="list-complete-item-handle">
+            {{ element.id }}[{{ element.author }}] {{ element.title }}
+          </div>
           <div style="position:absolute;right:0px;">
             <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
               <i style="color:#ff4949" class="el-icon-delete" />
@@ -17,7 +19,9 @@
       <h3>{{ list2Title }}</h3>
       <draggable :list="list2" :options="{group:'article'}" class="dragArea">
         <div v-for="element in list2" :key="element.id" class="list-complete-item">
-          <div class="list-complete-item-handle2" @click="pushEle(element)">{{ element.id }} [{{ element.author }}] {{ element.title }}</div>
+          <div class="list-complete-item-handle2" @click="pushEle(element)">
+            {{ element.id }} [{{ element.author }}] {{ element.title }}
+          </div>
         </div>
       </draggable>
     </div>

src/components/Dropzone/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ref="id" :action="url" :id="id" class="dropzone">
+  <div :id="id" :ref="id" :action="url" class="dropzone">
     <input type="file" name="file">
   </div>
 </template>

src/components/ErrorLog/index.vue

@@ -12,17 +12,23 @@
           <template slot-scope="scope">
             <div>
               <span class="message-title">Msg:</span>
-              <el-tag type="danger">{{ scope.row.err.message }}</el-tag>
+              <el-tag type="danger">
+                {{ scope.row.err.message }}
+              </el-tag>
             </div>
             <br>
             <div>
               <span class="message-title" style="padding-right: 10px;">Info: </span>
-              <el-tag type="warning">{{ scope.row.vm.$vnode.tag }} error in {{ scope.row.info }}</el-tag>
+              <el-tag type="warning">
+                {{ scope.row.vm.$vnode.tag }} error in {{ scope.row.info }}
+              </el-tag>
             </div>
             <br>
             <div>
               <span class="message-title" style="padding-right: 16px;">Url: </span>
-              <el-tag type="success">{{ scope.row.url }}</el-tag>
+              <el-tag type="success">
+                {{ scope.row.url }}
+              </el-tag>
             </div>
           </template>
         </el-table-column>
@@ -33,7 +39,6 @@
         </el-table-column>
       </el-table>
     </el-dialog>
-
   </div>
 </template>
 

src/components/GithubCorner/index.vue

@@ -5,17 +5,20 @@
       height="80"
       viewBox="0 0 250 250"
       style="fill:#40c9c6; color:#fff;"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
       <path
         d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
         fill="currentColor"
         style="transform-origin: 130px 106px;"
-        class="octo-arm"/>
+        class="octo-arm"
+      />
       <path
         d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
         fill="currentColor"
-        class="octo-body"/>
+        class="octo-body"
+      />
     </svg>
   </a>
 </template>

src/components/HeaderSearch/index.vue

@@ -10,7 +10,8 @@
       remote
       placeholder="Search"
       class="header-search-select"
-      @change="change">
+      @change="change"
+    >
       <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
     </el-select>
   </div>

src/components/ImageCropper/index.vue

@@ -48,7 +48,8 @@
                 @mousedown="imgStartMove"
                 @mousemove="imgMove"
                 @mouseup="createImg"
-                @mouseout="createImg">
+                @mouseout="createImg"
+              >
               <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-1" />
               <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-2" />
             </div>

src/components/Kanban/index.vue

@@ -6,7 +6,8 @@
     <draggable
       :list="list"
       :options="options"
-      class="board-column-content">
+      class="board-column-content"
+    >
       <div v-for="element in list" :key="element.id" class="board-item">
         {{ element.name }} {{ element.id }}
       </div>

src/components/LangSelect/index.vue

@@ -4,9 +4,15 @@
       <svg-icon class-name="international-icon" icon-class="language" />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item :disabled="language==='zh'" command="zh">中文</el-dropdown-item>
+      <el-dropdown-item :disabled="language==='zh'" command="zh">
-      <el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item>
+        中文
-      <el-dropdown-item :disabled="language==='es'" command="es">Español</el-dropdown-item>
+      </el-dropdown-item>
+      <el-dropdown-item :disabled="language==='en'" command="en">
+        English
+      </el-dropdown-item>
+      <el-dropdown-item :disabled="language==='es'" command="es">
+        Español
+      </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>

src/components/MDinput/index.vue

@@ -4,9 +4,9 @@
       <i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon" />
       <input
         v-if="type === 'email'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :readonly="readonly"
         :disabled="disabled"
         :autoComplete="autoComplete"
@@ -15,12 +15,13 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
+        @input="handleModelInput"
+      >
       <input
         v-if="type === 'url'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :readonly="readonly"
         :disabled="disabled"
         :autoComplete="autoComplete"
@@ -29,12 +30,13 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
+        @input="handleModelInput"
+      >
       <input
         v-if="type === 'number'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :step="step"
         :readonly="readonly"
         :disabled="disabled"
@@ -48,12 +50,13 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
+        @input="handleModelInput"
+      >
       <input
         v-if="type === 'password'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :readonly="readonly"
         :disabled="disabled"
         :autoComplete="autoComplete"
@@ -64,12 +67,13 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
+        @input="handleModelInput"
+      >
       <input
         v-if="type === 'tel'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :readonly="readonly"
         :disabled="disabled"
         :autoComplete="autoComplete"
@@ -78,12 +82,13 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
+        @input="handleModelInput"
+      >
       <input
         v-if="type === 'text'"
+        v-model="currentValue"
         :name="name"
         :placeholder="fillPlaceHolder"
-        v-model="currentValue"
         :readonly="readonly"
         :disabled="disabled"
         :autoComplete="autoComplete"
@@ -94,7 +99,8 @@
         class="material-input"
         @focus="handleMdFocus"
         @blur="handleMdBlur"
-        @input="handleModelInput">
+        @input="handleModelInput"
+      >
       <span class="material-input-bar" />
       <label class="material-label">
         <slot />

src/components/Pagination/index.vue

@@ -9,7 +9,8 @@
       :total="total"
       v-bind="$attrs"
       @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"/>
+      @current-change="handleCurrentChange"
+    />
   </div>
 </template>
 

src/components/SizeSelect/index.vue

@@ -4,8 +4,10 @@
       <svg-icon class-name="size-icon" icon-class="size" />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">{{
+      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
-      item.label }}</el-dropdown-item>
+        {{
+          item.label }}
+      </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>

src/components/ThemePicker/index.vue

@@ -2,7 +2,8 @@
   <el-color-picker
     v-model="theme"
     class="theme-picker"
-    popper-class="theme-picker-dropdown"/>
+    popper-class="theme-picker-dropdown"
+  />
 </template>
 
 <script>

src/components/Tinymce/components/editorImage.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="upload-container">
-    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">上传图片
+    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
+      上传图片
     </el-button>
     <el-dialog :visible.sync="dialogVisible">
       <el-upload
@@ -12,11 +13,18 @@
         :before-upload="beforeUpload"
         class="editor-slide-upload"
         action="https://httpbin.org/post"
-        list-type="picture-card">
+        list-type="picture-card"
-        <el-button size="small" type="primary">点击上传</el-button>
+      >
+        <el-button size="small" type="primary">
+          点击上传
+        </el-button>
       </el-upload>
-      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button @click="dialogVisible = false">
-      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+        取 消
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        确 定
+      </el-button>
     </el-dialog>
   </div>
 </template>

src/components/TreeTable/index.vue

@@ -4,11 +4,12 @@
     <slot name="pre-column" />
     <el-table-column
       v-for="item in columns"
-      :label="item.label"
       :key="item.key"
+      :label="item.label"
       :width="item.width"
       :align="item.align||'center'"
-      :header-align="item.headerAlign">
+      :header-align="item.headerAlign"
+    >
       <template slot-scope="scope">
         <slot :scope="scope" :name="item.key">
           <template v-if="item.expand">
@@ -21,15 +22,17 @@
           <template v-if="item.checkbox">
             <el-checkbox
               v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0"
+              v-model="scope.row._select"
               :style="{'padding-left':+scope.row._level*indent + 'px'} "
               :indeterminate="scope.row._select"
-              v-model="scope.row._select"
+              @change="handleCheckAllChange(scope.row)"
-              @change="handleCheckAllChange(scope.row)" />
+            />
             <el-checkbox
               v-else
-              :style="{'padding-left':+scope.row._level*indent + 'px'} "
               v-model="scope.row._select"
-              @change="handleCheckAllChange(scope.row)" />
+              :style="{'padding-left':+scope.row._level*indent + 'px'} "
+              @change="handleCheckAllChange(scope.row)"
+            />
           </template>
           {{ scope.row[item.key] }}
         </slot>

src/components/Upload/singleImage.vue

@@ -7,9 +7,12 @@
       :on-success="handleImageSuccess"
       class="image-uploader"
       drag
-      action="https://httpbin.org/post">
+      action="https://httpbin.org/post"
+    >
       <i class="el-icon-upload" />
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__text">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
     </el-upload>
     <div class="image-preview">
       <div v-show="imageUrl.length>1" class="image-preview-wrapper">

src/components/Upload/singleImage2.vue

@@ -7,9 +7,12 @@
       :on-success="handleImageSuccess"
       class="image-uploader"
       drag
-      action="https://httpbin.org/post">
+      action="https://httpbin.org/post"
+    >
       <i class="el-icon-upload" />
-      <div class="el-upload__text">Drag或<em>点击上传</em></div>
+      <div class="el-upload__text">
+        Drag或<em>点击上传</em>
+      </div>
     </el-upload>
     <div v-show="imageUrl.length>0" class="image-preview">
       <div v-show="imageUrl.length>1" class="image-preview-wrapper">

src/components/Upload/singleImage3.vue

@@ -7,9 +7,12 @@
       :on-success="handleImageSuccess"
       class="image-uploader"
       drag
-      action="https://httpbin.org/post">
+      action="https://httpbin.org/post"
+    >
       <i class="el-icon-upload" />
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__text">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
     </el-upload>
     <div class="image-preview image-app-preview">
       <div v-show="imageUrl.length>1" class="image-preview-wrapper">

src/components/UploadExcel/index.vue

@@ -3,7 +3,9 @@
     <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
     <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
       Drop excel file here or
-      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">Browse</el-button>
+      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
+        Browse
+      </el-button>
     </div>
   </div>
 </template>

src/views/clipboard/index.vue

@@ -3,11 +3,15 @@
     <el-tabs v-model="activeName">
       <el-tab-pane label="use clipboard  directly" name="directly">
         <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">copy</el-button>
+        <el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">
+          copy
+        </el-button>
       </el-tab-pane>
       <el-tab-pane label="use clipboard by v-directive" name="v-directive">
         <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">copy</el-button>
+        <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">
+          copy
+        </el-button>
       </el-tab-pane>
     </el-tabs>
   </div>

src/views/components-demo/avatarUpload.vue

@@ -7,18 +7,20 @@
 
     <pan-thumb :image="image" />
 
-    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change Avatar
+    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
+      Change Avatar
     </el-button>
 
     <image-cropper
       v-show="imagecropperShow"
+      :key="imagecropperKey"
       :width="300"
       :height="300"
-      :key="imagecropperKey"
       url="https://httpbin.org/post"
       lang-type="en"
       @close="close"
-      @crop-upload-success="cropSuccess"/>
+      @crop-upload-success="cropSuccess"
+    />
   </div>
 </template>
 

src/views/components-demo/countTo.vue

@@ -13,7 +13,8 @@
       :prefix="_prefix"
       :suffix="_suffix"
       :autoplay="false"
-      class="example"/>
+      class="example"
+    />
     <div style="margin-left: 25%;margin-top: 40px;">
       <label class="label" for="startValInput">startVal:
         <input v-model.number="setStartVal" type="number" name="startValInput">
@@ -24,8 +25,12 @@
       <label class="label" for="durationInput">duration:
         <input v-model.number="setDuration" type="number" name="durationInput">
       </label>
-      <div class="startBtn example-btn" @click="start">开始</div>
+      <div class="startBtn example-btn" @click="start">
-      <div class="pause-resume-btn example-btn" @click="pauseResume">暂停/恢复</div>
+        开始
+      </div>
+      <div class="pause-resume-btn example-btn" @click="pauseResume">
+        暂停/恢复
+      </div>
       <br>
       <label class="label" for="decimalsInput">decimals:
         <input v-model.number="setDecimals" type="number" name="decimalsInput">

src/views/components-demo/dragDialog.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="components-container">
-    <el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
+    <el-button type="primary" @click="dialogTableVisible = true">
+      open a Drag Dialog
+    </el-button>
     <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
       <el-select ref="select" v-model="value" placeholder="请选择">
         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />

src/views/components-demo/dragSelect.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="components-container">
-
     <el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
-      <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" />
+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
     </el-drag-select>
 
     <div style="margin-top:30px;">
-      <el-tag v-for="item of value" :key="item" style="margin-right:15px;">{{ item }}</el-tag>
+      <el-tag v-for="item of value" :key="item" style="margin-right:15px;">
+        {{ item }}
+      </el-tag>
     </div>
-
   </div>
 </template>
 

src/views/components-demo/markdown.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="components-container">
-
     <code>Markdown is based on
       <a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，Simply encapsulated in Vue.
       <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html">
@@ -8,17 +7,23 @@
     </code>
 
     <div class="editor-container">
-      <el-tag class="tag-title">Basic:</el-tag>
+      <el-tag class="tag-title">
+        Basic:
+      </el-tag>
       <markdown-editor v-model="content" height="300px" />
     </div>
 
     <div class="editor-container">
-      <el-tag class="tag-title">Markdown Mode:</el-tag>
+      <el-tag class="tag-title">
+        Markdown Mode:
+      </el-tag>
       <markdown-editor ref="markdownEditor" v-model="content" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px" />
     </div>
 
     <div class="editor-container">
-      <el-tag class="tag-title">Customize Toolbar:</el-tag>
+      <el-tag class="tag-title">
+        Customize Toolbar:
+      </el-tag>
       <markdown-editor
         ref="markdownEditor"
         v-model="content"
@@ -27,14 +32,17 @@
     </div>
 
     <div class="editor-container">
-      <el-tag class="tag-title">I18n:</el-tag>
+      <el-tag class="tag-title">
+        I18n:
+      </el-tag>
       <el-alert :closable="false" title="You can change the language of the admin system to see the effect" type="success" />
       <markdown-editor v-model="content" :language="language" height="300px" />
     </div>
 
-    <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">Get HTML</el-button>
+    <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">
+      Get HTML
+    </el-button>
     <div v-html="html" />
-
   </div>
 </template>
 

src/views/components-demo/mixin.vue

@@ -7,22 +7,34 @@
         </div>
         <div style="margin-bottom:50px;">
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn blue-btn" to="/documentation/index">Documentation</router-link>
+            <router-link class="pan-btn blue-btn" to="/documentation/index">
+              Documentation
+            </router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn light-blue-btn" to="/icon/index">Icons</router-link>
+            <router-link class="pan-btn light-blue-btn" to="/icon/index">
+              Icons
+            </router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn pink-btn" to="/excel/export-excel">Excel</router-link>
+            <router-link class="pan-btn pink-btn" to="/excel/export-excel">
+              Excel
+            </router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn green-btn" to="/table/complex-table">Table</router-link>
+            <router-link class="pan-btn green-btn" to="/table/complex-table">
+              Table
+            </router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn tiffany-btn" to="/example/create">Form</router-link>
+            <router-link class="pan-btn tiffany-btn" to="/example/create">
+              Form
+            </router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
+            <router-link class="pan-btn yellow-btn" to="/theme/index">
+              Theme
+            </router-link>
           </el-col>
         </div>
       </el-card>
@@ -37,7 +49,9 @@
           <div style="height:100px;">
             <el-form :model="demo" :rules="demoRules">
               <el-form-item prop="title">
-                <md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">标题</md-input>
+                <md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">
+                  标题
+                </md-input>
               </el-form-item>
             </el-form>
           </div>
@@ -63,7 +77,9 @@
             <span>水波纹 waves v-directive</span>
           </div>
           <div class="component-item">
-            <el-button v-waves type="primary">水波纹效果</el-button>
+            <el-button v-waves type="primary">
+              水波纹效果
+            </el-button>
           </div>
         </el-card>
       </el-col>
@@ -92,7 +108,6 @@
         </el-card>
       </el-col>
     </el-row>
-
   </div>
 </template>
 

src/views/components-demo/sticky.vue

@@ -7,7 +7,7 @@
         </el-button>
         <el-dropdown-menu slot="dropdown" class="no-border">
           <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
-            <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
+            <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
               {{ item.name }}
             </el-checkbox>
           </el-checkbox-group>
@@ -20,7 +20,9 @@
         </el-button>
         <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
           <el-input v-model="url" placeholder="Please enter the content">
-            <template slot="prepend">Url</template>
+            <template slot="prepend">
+              Url
+            </template>
           </el-input>
         </el-dropdown-menu>
       </el-dropdown>
@@ -29,7 +31,8 @@
         <el-date-picker v-model="time" :picker-options="pickerOptions" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time" />
       </div>
 
-      <el-button style="margin-left: 10px;" type="success">publish
+      <el-button style="margin-left: 10px;" type="success">
+        publish
       </el-button>
     </sticky>
 

src/views/components-demo/tinymce.vue

@@ -5,7 +5,7 @@
       <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{ $t('components.documentation') }}</a>
     </code>
     <div>
-      <tinymce :height="300" v-model="content"/>
+      <tinymce v-model="content" :height="300" />
     </div>
     <div class="editor-content" v-html="content" />
   </div>

src/views/dashboard/admin/components/PanelGroup.vue

@@ -6,7 +6,9 @@
           <svg-icon icon-class="peoples" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">New Visits</div>
+          <div class="card-panel-text">
+            New Visits
+          </div>
           <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
         </div>
       </div>
@@ -17,7 +19,9 @@
           <svg-icon icon-class="message" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">Messages</div>
+          <div class="card-panel-text">
+            Messages
+          </div>
           <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
         </div>
       </div>
@@ -28,7 +32,9 @@
           <svg-icon icon-class="money" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">Purchases</div>
+          <div class="card-panel-text">
+            Purchases
+          </div>
           <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
         </div>
       </div>
@@ -39,7 +45,9 @@
           <svg-icon icon-class="shopping" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text">Shoppings</div>
+          <div class="card-panel-text">
+            Shoppings
+          </div>
           <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
         </div>
       </div>

src/views/dashboard/admin/components/TodoList/Todo.vue

@@ -5,18 +5,20 @@
         :checked="todo.done"
         class="toggle"
         type="checkbox"
-        @change="toggleTodo( todo)">
+        @change="toggleTodo( todo)"
+      >
       <label @dblclick="editing = true" v-text="todo.text" />
       <button class="destroy" @click="deleteTodo( todo )" />
     </div>
     <input
-      v-focus="editing"
       v-show="editing"
+      v-focus="editing"
       :value="todo.text"
       class="edit"
       @keyup.enter="doneEdit"
       @keyup.esc="cancelEdit"
-      @blur="doneEdit">
+      @blur="doneEdit"
+    >
   </li>
 </template>
 

src/views/dashboard/admin/components/TodoList/index.vue

@@ -15,7 +15,8 @@
           :todo="todo"
           @toggleTodo="toggleTodo"
           @editTodo="editTodo"
-          @deleteTodo="deleteTodo"/>
+          @deleteTodo="deleteTodo"
+        />
       </ul>
     </section>
     <!-- footer -->

src/views/dashboard/admin/components/TransactionTable.vue

@@ -12,7 +12,9 @@
     </el-table-column>
     <el-table-column label="Status" width="100" align="center">
       <template slot-scope="scope">
-        <el-tag :type="scope.row.status | statusFilter"> {{ scope.row.status }}</el-tag>
+        <el-tag :type="scope.row.status | statusFilter">
+          {{ scope.row.status }}
+        </el-tag>
       </template>
     </el-table-column>
   </el-table>

src/views/dashboard/admin/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="dashboard-editor-container">
-
     <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
 
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
@@ -38,7 +37,6 @@
         <box-card />
       </el-col>
     </el-row>
-
   </div>
 </template>
 

src/views/dashboard/editor/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="dashboard-editor-container">
     <div class=" clearfix">
-      <pan-thumb :image="avatar" style="float: left"> Your roles:
+      <pan-thumb :image="avatar" style="float: left">
+        Your roles:
         <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
       </pan-thumb>
       <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />

src/views/errorPage/401.vue

@@ -1,18 +1,26 @@
 <template>
   <div class="errPage-container">
-    <el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
+    <el-button icon="arrow-left" class="pan-back-btn" @click="back">
+      返回
+    </el-button>
     <el-row>
       <el-col :span="12">
-        <h1 class="text-jumbo text-ginormous">Oops!</h1>
+        <h1 class="text-jumbo text-ginormous">
+          Oops!
+        </h1>
         gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
         <h2>你没有权限去该页面</h2>
         <h6>如有不满请联系你领导</h6>
         <ul class="list-unstyled">
           <li>或者你可以去:</li>
           <li class="link-type">
-            <router-link to="/dashboard">回首页</router-link>
+            <router-link to="/dashboard">
+              回首页
+            </router-link>
+          </li>
+          <li class="link-type">
+            <a href="https://www.taobao.com/">随便看看</a>
           </li>
-          <li class="link-type"><a href="https://www.taobao.com/">随便看看</a></li>
           <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
         </ul>
       </el-col>

src/views/errorPage/404.vue

@@ -8,13 +8,22 @@
         <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
       </div>
       <div class="bullshit">
-        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__oops">
-        <div class="bullshit__info">版权所有
+          OOPS!
+        </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__headline">
-        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
+          {{ message }}
-        <router-link to="/" class="bullshit__return-home">返回首页</router-link>
+        </div>
+        <div class="bullshit__info">
+          请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告
+        </div>
+        <router-link to="/" class="bullshit__return-home">
+          返回首页
+        </router-link>
       </div>
     </div>
   </div>

src/views/example/components/ArticleDetail.vue

@@ -1,19 +1,20 @@
 <template>
   <div class="createPost-container">
     <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
-
       <sticky :class-name="'sub-navbar '+postForm.status">
         <CommentDropdown v-model="postForm.comment_disabled" />
         <PlatformDropdown v-model="postForm.platforms" />
         <SourceUrlDropdown v-model="postForm.source_uri" />
-        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">发布
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
+          发布
+        </el-button>
+        <el-button v-loading="loading" type="warning" @click="draftForm">
+          草稿
         </el-button>
-        <el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
       </sticky>
 
       <div class="createPost-main-container">
         <el-row>
-
           <Warning />
 
           <el-col :span="24">
@@ -47,7 +48,8 @@
                       :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                       :low-threshold="1"
                       :high-threshold="3"
-                      style="margin-top:8px;"/>
+                      style="margin-top:8px;"
+                    />
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -56,12 +58,12 @@
         </el-row>
 
         <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
-          <el-input :rows="1" v-model="postForm.content_short" type="textarea" class="article-textarea" autosize placeholder="请输入内容"/>
+          <el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="请输入内容" />
           <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
         </el-form-item>
 
         <el-form-item prop="content" style="margin-bottom: 30px;">
-          <Tinymce ref="editor" :height="400" v-model="postForm.content" />
+          <Tinymce ref="editor" v-model="postForm.content" :height="400" />
         </el-form-item>
 
         <el-form-item prop="image_uri" style="margin-bottom: 30px;">
@@ -69,7 +71,6 @@
         </el-form-item>
       </div>
     </el-form>
-
   </div>
 </template>
 

src/views/example/components/Dropdown/Comment.vue

@@ -1,13 +1,18 @@
 <template>
   <el-dropdown :show-timeout="100" trigger="click">
-    <el-button plain>{{ !comment_disabled?'评论已打开':'评论已关闭' }}
+    <el-button plain>
+      {{ !comment_disabled?'评论已打开':'评论已关闭' }}
       <i class="el-icon-caret-bottom el-icon--right" />
     </el-button>
     <el-dropdown-menu slot="dropdown" class="no-padding">
       <el-dropdown-item>
         <el-radio-group v-model="comment_disabled" style="padding: 10px;">
-          <el-radio :label="true">关闭评论</el-radio>
+          <el-radio :label="true">
-          <el-radio :label="false">打开评论</el-radio>
+            关闭评论
+          </el-radio>
+          <el-radio :label="false">
+            打开评论
+          </el-radio>
         </el-radio-group>
       </el-dropdown-item>
     </el-dropdown-menu>

src/views/example/components/Dropdown/Platform.vue

@@ -6,7 +6,7 @@
     </el-button>
     <el-dropdown-menu slot="dropdown" class="no-border">
       <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
-        <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
+        <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
           {{ item.name }}
         </el-checkbox>
       </el-checkbox-group>

src/views/example/components/Dropdown/SourceUrl.vue

@@ -7,7 +7,9 @@
     <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
       <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
         <el-input v-model="source_uri" placeholder="请输入内容">
-          <template slot="prepend">填写url</template>
+          <template slot="prepend">
+            填写url
+          </template>
         </el-input>
       </el-form-item>
     </el-dropdown-menu>

src/views/example/components/Warning.vue

@@ -4,7 +4,8 @@
     的include，直接缓存所有页面。详情见
     <a
       href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
-      target="_blank">文档</a>
+      target="_blank"
+    >文档</a>
   </p>
 </template>
 

src/views/example/list.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="app-container">
-
     <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
       <el-table-column align="center" label="ID" width="80">
         <template slot-scope="scope">
@@ -28,13 +27,14 @@
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | statusFilter">
+            {{ scope.row.status }}
+          </el-tag>
         </template>
       </el-table-column>
 
       <el-table-column min-width="300px" label="Title">
         <template slot-scope="scope">
-
           <router-link :to="'/example/edit/'+scope.row.id" class="link-type">
             <span>{{ scope.row.title }}</span>
           </router-link>
@@ -44,14 +44,15 @@
       <el-table-column align="center" label="Actions" width="120">
         <template slot-scope="scope">
           <router-link :to="'/example/edit/'+scope.row.id">
-            <el-button type="primary" size="small" icon="el-icon-edit">Edit</el-button>
+            <el-button type="primary" size="small" icon="el-icon-edit">
+              Edit
+            </el-button>
           </router-link>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-
   </div>
 </template>
 

src/views/excel/components/AutoWidthOption.vue

@@ -2,8 +2,12 @@
   <div style="display:inline-block;">
     <label class="radio-label">Cell Auto-Width: </label>
     <el-radio-group v-model="autoWidth">
-      <el-radio :label="true" border>True</el-radio>
+      <el-radio :label="true" border>
-      <el-radio :label="false" border>False</el-radio>
+        True
+      </el-radio>
+      <el-radio :label="false" border>
+        False
+      </el-radio>
     </el-radio-group>
   </div>
 </template>

src/views/excel/components/BookTypeOption.vue

@@ -6,7 +6,8 @@
         v-for="item in options"
         :key="item"
         :label="item"
-        :value="item"/>
+        :value="item"
+      />
     </el-select>
   </div>
 </template>

src/views/excel/components/FilenameOption.vue

@@ -2,7 +2,7 @@
   <div style="display:inline-block;">
     <!-- $t is vue-i18n global function to translate lang -->
     <label class="radio-label" style="padding-left:0;">Filename: </label>
-    <el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
+    <el-input v-model="filename" :placeholder="$t('excel.placeholder')" style="width:340px;" prefix-icon="el-icon-document" />
   </div>
 </template>
 

src/views/excel/exportExcel.vue

@@ -1,12 +1,13 @@
 <template>
   <!-- $t is vue-i18n global function to translate lang -->
   <div class="app-container">
-
     <div>
       <FilenameOption v-model="filename" />
       <AutoWidthOption v-model="autoWidth" />
       <BookTypeOption v-model="bookType" />
-      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">{{ $t('excel.export') }} Excel</el-button>
+      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">
+        {{ $t('excel.export') }} Excel
+      </el-button>
       <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
         <el-tag type="info">Documentation</el-tag>
       </a>

src/views/excel/selectExcel.vue

@@ -1,20 +1,23 @@
 <template>
   <div class="app-container">
     <!-- $t is vue-i18n global function to translate lang -->
-    <el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
+    <el-input v-model="filename" :placeholder="$t('excel.placeholder')" style="width:340px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">{{ $t('excel.selectedExport') }}</el-button>
+    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">
+      {{ $t('excel.selectedExport') }}
+    </el-button>
     <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
       <el-tag type="info">Documentation</el-tag>
     </a>
     <el-table
-      v-loading="listLoading"
       ref="multipleTable"
+      v-loading="listLoading"
       :data="list"
       element-loading-text="拼命加载中"
       border
       fit
       highlight-current-row
-      @selection-change="handleSelectionChange">
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" align="center" />
       <el-table-column align="center" label="Id" width="95">
         <template slot-scope="scope">

src/views/excel/uploadExcel.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
     <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
-      <el-table-column v-for="item of tableHeader" :prop="item" :label="item" :key="item"/>
+      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
     </el-table>
   </div>
 </template>

src/views/guide/index.vue

@@ -5,7 +5,9 @@
       <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.
       </a>
     </p>
-    <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">{{ $t('guide.button') }}</el-button>
+    <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
+      {{ $t('guide.button') }}
+    </el-button>
   </div>
 </template>
 

src/views/i18n-demo/index.vue

@@ -7,11 +7,19 @@
       </div>
       <div>
         <el-radio-group v-model="lang" size="small">
-          <el-radio label="zh" border>简体中文</el-radio>
+          <el-radio label="zh" border>
-          <el-radio label="en" border>English</el-radio>
+            简体中文
-          <el-radio label="es" border>Español</el-radio>
+          </el-radio>
+          <el-radio label="en" border>
+            English
+          </el-radio>
+          <el-radio label="es" border>
+            Español
+          </el-radio>
         </el-radio-group>
-        <el-tag style="margin-top:15px;display:block;" type="info">{{ $t('i18nView.note') }}</el-tag>
+        <el-tag style="margin-top:15px;display:block;" type="info">
+          {{ $t('i18nView.note') }}
+        </el-tag>
       </div>
     </el-card>
 
@@ -26,16 +34,29 @@
               v-for="item in options"
               :key="item.value"
               :label="item.label"
-              :value="item.value"/>
+              :value="item.value"
+            />
           </el-select>
         </div>
         <div class="block">
-          <el-button class="item-btn" size="small">{{ $t('i18nView.default') }}</el-button>
+          <el-button class="item-btn" size="small">
-          <el-button class="item-btn" size="small" type="primary">{{ $t('i18nView.primary') }}</el-button>
+            {{ $t('i18nView.default') }}
-          <el-button class="item-btn" size="small" type="success">{{ $t('i18nView.success') }}</el-button>
+          </el-button>
-          <el-button class="item-btn" size="small" type="info">{{ $t('i18nView.info') }}</el-button>
+          <el-button class="item-btn" size="small" type="primary">
-          <el-button class="item-btn" size="small" type="warning">{{ $t('i18nView.warning') }}</el-button>
+            {{ $t('i18nView.primary') }}
-          <el-button class="item-btn" size="small" type="danger">{{ $t('i18nView.danger') }}</el-button>
+          </el-button>
+          <el-button class="item-btn" size="small" type="success">
+            {{ $t('i18nView.success') }}
+          </el-button>
+          <el-button class="item-btn" size="small" type="info">
+            {{ $t('i18nView.info') }}
+          </el-button>
+          <el-button class="item-btn" size="small" type="warning">
+            {{ $t('i18nView.warning') }}
+          </el-button>
+          <el-button class="item-btn" size="small" type="danger">
+            {{ $t('i18nView.danger') }}
+          </el-button>
         </div>
       </el-col>
       <el-col :span="12" :xs="24">

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -1,6 +1,5 @@
 <template>
   <div v-if="!item.hidden" class="menu-wrapper">
-
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
@@ -15,13 +14,13 @@
       </template>
       <sidebar-item
         v-for="child in item.children"
+        :key="child.path"
         :is-nest="true"
         :item="child"
-        :key="child.path"
         :base-path="resolvePath(child.path)"
-        class="nest-menu" />
+        class="nest-menu"
+      />
     </el-submenu>
-
   </div>
 </template>
 

src/views/layout/components/TagsView/index.vue

@@ -4,23 +4,32 @@
       <router-link
         v-for="tag in visitedViews"
         ref="tag"
+        :key="tag.path"
         :class="isActive(tag)?'active':''"
         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        :key="tag.path"
         tag="span"
         class="tags-view-item"
         @click.middle.native="closeSelectedTag(tag)"
-        @contextmenu.prevent.native="openMenu(tag,$event)">
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
         {{ generateTitle(tag.title) }}
         <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
+      <li @click="refreshSelectedTag(selectedTag)">
-      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">{{
+        {{ $t('tagsView.refresh') }}
-      $t('tagsView.close') }}</li>
+      </li>
-      <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">
-      <li @click="closeAllTags(selectedTag)">{{ $t('tagsView.closeAll') }}</li>
+        {{
+          $t('tagsView.close') }}
+      </li>
+      <li @click="closeOthersTags">
+        {{ $t('tagsView.closeOthers') }}
+      </li>
+      <li @click="closeAllTags(selectedTag)">
+        {{ $t('tagsView.closeAll') }}
+      </li>
     </ul>
   </div>
 </template>

src/views/pdf/download.vue

@@ -1,7 +1,9 @@
 <template>
   <div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF">
     <div class="article__heading">
-      <div class="article__heading__title"> {{ article.title }}</div>
+      <div class="article__heading__title">
+        {{ article.title }}
+      </div>
     </div>
     <div style="color: #ccc;">
       This article is from Evan You on <a target="_blank" href="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf">medium</a>

src/views/pdf/index.vue

@@ -2,7 +2,9 @@
   <div class="app-container">
     <code style="margin-top:15px;">{{ $t('pdf.tips') }}</code>
     <router-link target="_blank" to="/pdf/download">
-      <el-button type="primary">Click to download PDF</el-button>
+      <el-button type="primary">
+        Click to download PDF
+      </el-button>
     </router-link>
   </div>
 </template>

src/views/permission/components/SwitchRoles.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div style="margin-bottom:15px;">{{ $t('permission.roles') }}： {{ roles }}</div>
+    <div style="margin-bottom:15px;">
+      {{ $t('permission.roles') }}： {{ roles }}
+    </div>
     {{ $t('permission.switchRoles') }}：
     <el-radio-group v-model="switchRoles">
       <el-radio-button label="editor" />

src/views/permission/directive.vue

@@ -7,7 +7,9 @@
           Only
           <el-tag class="permission-tag" size="small">admin</el-tag> can see this
         </span>
-        <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">v-permission="['admin']"</el-tag>
+        <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
+          v-permission="['admin']"
+        </el-tag>
       </div>
 
       <div>
@@ -15,7 +17,9 @@
           Only
           <el-tag class="permission-tag" size="small">editor</el-tag> can see this
         </span>
-        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">v-permission="['editor']"</el-tag>
+        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">
+          v-permission="['editor']"
+        </el-tag>
       </div>
 
       <div>
@@ -24,7 +28,9 @@
           <el-tag class="permission-tag" size="small">admin</el-tag> and
           <el-tag class="permission-tag" size="small">editor</el-tag> can see this
         </span>
-        <el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">v-permission="['admin','editor']"</el-tag>
+        <el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">
+          v-permission="['admin','editor']"
+        </el-tag>
       </div>
     </div>
 
@@ -37,17 +43,23 @@
       <el-tabs type="border-card" style="width:550px;">
         <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
           Admin can see this
-          <el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['admin'])"</el-tag>
+          <el-tag class="permission-sourceCode" type="info">
+            v-if="checkPermission(['admin'])"
+          </el-tag>
         </el-tab-pane>
 
         <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
           Editor can see this
-          <el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['editor'])"</el-tag>
+          <el-tag class="permission-sourceCode" type="info">
+            v-if="checkPermission(['editor'])"
+          </el-tag>
         </el-tab-pane>
 
         <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
           Both admin or editor can see this
-          <el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['admin','editor'])"</el-tag>
+          <el-tag class="permission-sourceCode" type="info">
+            v-if="checkPermission(['admin','editor'])"
+          </el-tag>
         </el-tab-pane>
       </el-tabs>
     </div>

src/views/qiniu/upload.vue

@@ -1,7 +1,9 @@
 <template>
   <el-upload :data="dataObj" :multiple="true" :before-upload="beforeUpload" action="https://upload.qbox.me" drag>
     <i class="el-icon-upload" />
-    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+    <div class="el-upload__text">
+      将文件拖到此处，或<em>点击上传</em>
+    </div>
   </el-upload>
 </template>
 

src/views/tab/components/tabPane.vue

@@ -1,12 +1,12 @@
 <template>
   <el-table :data="list" border fit highlight-current-row style="width: 100%">
-
     <el-table-column
       v-loading="loading"
       align="center"
       label="ID"
       width="65"
-      element-loading-text="请给我点时间！">
+      element-loading-text="请给我点时间！"
+    >
       <template slot-scope="scope">
         <span>{{ scope.row.id }}</span>
       </template>
@@ -45,10 +45,11 @@
 
     <el-table-column class-name="status-col" label="Status" width="110">
       <template slot-scope="scope">
-        <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+        <el-tag :type="scope.row.status | statusFilter">
+          {{ scope.row.status }}
+        </el-tag>
       </template>
     </el-table-column>
-
   </el-table>
 </template>
 

src/views/tab/index.vue

@@ -3,7 +3,7 @@
     <el-tag>mounted times ：{{ createdTimes }}</el-tag>
     <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
     <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
-      <el-tab-pane v-for="item in tabMapOptions" :label="item.label" :key="item.key" :name="item.key">
+      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
         <keep-alive>
           <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
         </keep-alive>

src/views/table/complexTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input :placeholder="$t('table.title')" v-model="listQuery.title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
       <el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
         <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
       </el-select>
@@ -11,21 +11,30 @@
       <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
         <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
       </el-select>
-      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">{{ $t('table.add') }}</el-button>
+        {{ $t('table.search') }}
-      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">{{ $t('table.export') }}</el-button>
+      </el-button>
-      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">{{ $t('table.reviewer') }}</el-checkbox>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        {{ $t('table.add') }}
+      </el-button>
+      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
+        {{ $t('table.export') }}
+      </el-button>
+      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
+        {{ $t('table.reviewer') }}
+      </el-checkbox>
     </div>
 
     <el-table
-      v-loading="listLoading"
       :key="tableKey"
+      v-loading="listLoading"
       :data="list"
       border
       fit
       highlight-current-row
       style="width: 100%;"
-      @sort-change="sortChange">
+      @sort-change="sortChange"
+    >
       <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="65">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
@@ -65,17 +74,24 @@
       </el-table-column>
       <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | statusFilter">
+            {{ scope.row.status }}
+          </el-tag>
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
+          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
-          <el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">{{ $t('table.publish') }}
+            {{ $t('table.edit') }}
           </el-button>
-          <el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">{{ $t('table.draft') }}
+          <el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">
+            {{ $t('table.publish') }}
           </el-button>
-          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">{{ $t('table.delete') }}
+          <el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">
+            {{ $t('table.draft') }}
+          </el-button>
+          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">
+            {{ $t('table.delete') }}
           </el-button>
         </template>
       </el-table-column>
@@ -105,12 +121,16 @@
           <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
         </el-form-item>
         <el-form-item :label="$t('table.remark')">
-          <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.remark" type="textarea" placeholder="Please input"/>
+          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
+        <el-button @click="dialogFormVisible = false">
-        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">{{ $t('table.confirm') }}</el-button>
+          {{ $t('table.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
+          {{ $t('table.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -123,7 +143,6 @@
         <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
       </span>
     </el-dialog>
-
   </div>
 </template>
 

src/views/table/dragTable.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="app-container">
     <!-- Note that row-key is necessary to get a correct row order. -->
-    <el-table v-loading="listLoading" ref="dragTable" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
+    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
-
       <el-table-column align="center" label="ID" width="65">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
@@ -41,7 +40,9 @@
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | statusFilter">
+            {{ scope.row.status }}
+          </el-tag>
         </template>
       </el-table-column>
 
@@ -50,12 +51,14 @@
           <svg-icon class="drag-handler" icon-class="drag" />
         </template>
       </el-table-column>
-
     </el-table>
     <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
-    <div class="show-d">{{ $t('table.dragTips1') }} : &nbsp; {{ oldList }}</div>
+    <div class="show-d">
-    <div class="show-d">{{ $t('table.dragTips2') }} : {{ newList }}</div>
+      {{ $t('table.dragTips1') }} : &nbsp; {{ oldList }}
-
+    </div>
+    <div class="show-d">
+      {{ $t('table.dragTips2') }} : {{ newList }}
+    </div>
   </div>
 </template>
 

src/views/table/dynamicTable/fixedThead.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="app-container">
-
     <div class="filter-container">
       <el-checkbox-group v-model="checkboxVal">
-        <el-checkbox label="apple">apple</el-checkbox>
+        <el-checkbox label="apple">
-        <el-checkbox label="banana">banana</el-checkbox>
+          apple
-        <el-checkbox label="orange">orange</el-checkbox>
+        </el-checkbox>
+        <el-checkbox label="banana">
+          banana
+        </el-checkbox>
+        <el-checkbox label="orange">
+          orange
+        </el-checkbox>
       </el-checkbox-group>
     </div>
 
-    <el-table :data="tableData" :key="key" border fit highlight-current-row style="width: 100%">
+    <el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%">
       <el-table-column prop="name" label="fruitName" width="180" />
       <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
         <template slot-scope="scope">
@@ -17,7 +22,6 @@
         </template>
       </el-table-column>
     </el-table>
-
   </div>
 </template>
 

src/views/table/dynamicTable/index.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="app-container">
-    <div style="margin:0 0 5px 20px">{{ $t('table.dynamicTips1') }}</div>
+    <div style="margin:0 0 5px 20px">
+      {{ $t('table.dynamicTips1') }}
+    </div>
     <fixed-thead />
 
-    <div style="margin:30px 0 5px 20px">{{ $t('table.dynamicTips2') }}</div>
+    <div style="margin:30px 0 5px 20px">
+      {{ $t('table.dynamicTips2') }}
+    </div>
     <unfixed-thead />
   </div>
 </template>

src/views/table/dynamicTable/unfixedThead.vue

@@ -1,11 +1,16 @@
 <template>
   <div class="app-container">
-
     <div class="filter-container">
       <el-checkbox-group v-model="formThead">
-        <el-checkbox label="apple">apple</el-checkbox>
+        <el-checkbox label="apple">
-        <el-checkbox label="banana">banana</el-checkbox>
+          apple
-        <el-checkbox label="orange">orange</el-checkbox>
+        </el-checkbox>
+        <el-checkbox label="banana">
+          banana
+        </el-checkbox>
+        <el-checkbox label="orange">
+          orange
+        </el-checkbox>
       </el-checkbox-group>
     </div>
 
@@ -17,7 +22,6 @@
         </template>
       </el-table-column>
     </el-table>
-
   </div>
 </template>
 

src/views/table/inlineEditTable.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="app-container">
-
     <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
-
       <el-table-column align="center" label="ID" width="80">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
@@ -29,7 +27,9 @@
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | statusFilter">
+            {{ scope.row.status }}
+          </el-tag>
         </template>
       </el-table-column>
 
@@ -37,7 +37,9 @@
         <template slot-scope="scope">
           <template v-if="scope.row.edit">
             <el-input v-model="scope.row.title" class="edit-input" size="small" />
-            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
+            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">
+              cancel
+            </el-button>
           </template>
           <span v-else>{{ scope.row.title }}</span>
         </template>
@@ -45,11 +47,14 @@
 
       <el-table-column align="center" label="Actions" width="120">
         <template slot-scope="scope">
-          <el-button v-if="scope.row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">Ok</el-button>
+          <el-button v-if="scope.row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">
-          <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit">Edit</el-button>
+            Ok
+          </el-button>
+          <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit">
+            Edit
+          </el-button>
         </template>
       </el-table-column>
-
     </el-table>
   </div>
 </template>

src/views/theme/index.vue

@@ -14,18 +14,30 @@
     </el-card>
 
     <div class="block">
-      <el-button type="primary">Primary</el-button>
+      <el-button type="primary">
-      <el-button type="success">Success</el-button>
+        Primary
-      <el-button type="info">Info</el-button>
+      </el-button>
-      <el-button type="warning">Warning</el-button>
+      <el-button type="success">
-      <el-button type="danger">Danger</el-button>
+        Success
+      </el-button>
+      <el-button type="info">
+        Info
+      </el-button>
+      <el-button type="warning">
+        Warning
+      </el-button>
+      <el-button type="danger">
+        Danger
+      </el-button>
     </div>
 
     <div class="block">
       <el-button type="primary" icon="el-icon-edit" />
       <el-button type="primary" icon="el-icon-share" />
       <el-button type="primary" icon="el-icon-delete" />
-      <el-button type="primary" icon="el-icon-search">Search</el-button>
+      <el-button type="primary" icon="el-icon-search">
+        Search
+      </el-button>
       <el-button type="primary">
         Upload
         <i class="el-icon-upload el-icon-right" />
@@ -33,23 +45,28 @@
     </div>
 
     <div class="block">
-      <el-tag v-for="tag in tags" :type="tag.type" :key="tag.type" class="tag-item">
+      <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">
         {{ tag.name }}
       </el-tag>
     </div>
 
     <div class="block">
       <el-radio-group v-model="radio">
-        <el-radio :label="3">Option A</el-radio>
+        <el-radio :label="3">
-        <el-radio :label="6">Option B</el-radio>
+          Option A
-        <el-radio :label="9">Option C</el-radio>
+        </el-radio>
+        <el-radio :label="6">
+          Option B
+        </el-radio>
+        <el-radio :label="9">
+          Option C
+        </el-radio>
       </el-radio-group>
     </div>
 
     <div class="block">
       <el-slider v-model="slideValue" />
     </div>
-
   </div>
 </template>
 

src/views/tree-table/custom/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <div class="app-container">
-
       <el-button type="primary" size="small" style="margin:0 0 20px 0;">
         <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
       </el-button>
@@ -15,7 +14,6 @@
         default-children="children"
         @selection-change="selectChange"
       >
-
         <template slot="selection">
           <el-table-column type="selection" align="center" width="55" />
         </template>
@@ -31,19 +29,18 @@
         </template>
 
         <template slot="timeline" slot-scope="{scope}">
-
           <el-tooltip :content="scope.row.timeLine+'ms'" effect="dark" placement="left">
             <div class="processContainer">
               <div
                 :style="{ width:(scope.row.timeLine||0) * 3+'px',
                           background:scope.row.timeLine>50?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
                           marginLeft:scope.row._level * 50+'px' }"
-                class="process">
+                class="process"
+              >
                 <span style="display:inline-block" />
               </div>
             </div>
           </el-tooltip>
-
         </template>
 
         <template slot="append" slot-scope="{scope}">
@@ -51,18 +48,24 @@
             size="mini"
             type="primary"
             @click="addMenuItem(scope.row,'brother')"
-          >Append Brother
+          >
+            Append Brother
           </el-button>
           <el-button
             size="mini"
             type="primary"
             @click="addMenuItem(scope.row,'children')"
-          >Append Child
+          >
+            Append Child
           </el-button>
         </template>
         <template slot="operation" slot-scope="{scope}">
-          <el-button size="mini" type="success" @click="editItem(scope.row)">Edit</el-button>
+          <el-button size="mini" type="success" @click="editItem(scope.row)">
-          <el-button size="mini" type="danger" @click="deleteItem(scope.row)">Delete</el-button>
+            Edit
+          </el-button>
+          <el-button size="mini" type="danger" @click="deleteItem(scope.row)">
+            Delete
+          </el-button>
         </template>
       </tree-table>
     </div>
@@ -78,7 +81,6 @@
         <el-button type="primary" @click="updateItem">Confirm</el-button>
       </span>
     </el-dialog>
-
   </div>
 </template>
 

src/views/tree-table/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="app-container">
-
     <div style="margin-bottom:20px;">
-
       <el-button type="primary" size="small" class="option-item">
         <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
       </el-button>
@@ -13,7 +11,8 @@
           v-model="defaultExpandAll"
           active-color="#13ce66"
           inactive-color="#ff4949"
-          @change="reset"/>
+          @change="reset"
+        />
       </div>
 
       <div class="option-item">
@@ -24,7 +23,6 @@
           inactive-color="#ff4949"
         />
       </div>
-
     </div>
 
     <tree-table :key="key" :default-expand-all="defaultExpandAll" :data="data" :columns="columns" border>
@@ -34,10 +32,11 @@
         <el-tag>select: {{ scope.row._select }}</el-tag>
       </template>
       <template slot="operation" slot-scope="{scope}">
-        <el-button type="primary" size="" @click="click(scope)">Click</el-button>
+        <el-button type="primary" size="" @click="click(scope)">
+          Click
+        </el-button>
       </template>
     </tree-table>
-
   </div>
 </template>
 

src/views/zip/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="app-container">
     <!-- $t is vue-i18n global function to translate lang -->
-    <el-input :placeholder="$t('zip.placeholder')" v-model="filename" style="width:300px;" prefix-icon="el-icon-document"/>
+    <el-input v-model="filename" :placeholder="$t('zip.placeholder')" style="width:300px;" prefix-icon="el-icon-document" />
-    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="document" @click="handleDownload">{{ $t('zip.export') }} zip</el-button>
+    <el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="document" @click="handleDownload">
+      {{ $t('zip.export') }} zip
+    </el-button>
     <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
       <el-table-column align="center" label="ID" width="95">
         <template slot-scope="scope">