Merge pull request #1 from PanJiaChen/master

merge update
2019-03-22 10:25:35 +08:00 · 2019-03-22 10:25:35 +08:00 · 2b98e62327
parent 17f0d84b35 ae6bbf7858
commit 2b98e62327
125 changed files with 1189 additions and 360 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -21,6 +21,8 @@ module.exports = {
        "allowFirstLine": false
      }
    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
    "vue/name-property-casing": ["error", "PascalCase"],
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
--- a/package.json
+++ b/package.json
@ -80,10 +80,10 @@
    "copy-webpack-plugin": "4.5.2",
    "cross-env": "5.2.0",
    "css-loader": "1.0.0",
-    "eslint": "4.19.1",
+    "eslint": "5.15.2",
    "eslint-friendly-formatter": "4.0.1",
-    "eslint-loader": "2.0.0",
-    "eslint-plugin-vue": "4.7.1",
+    "eslint-loader": "2.1.2",
+    "eslint-plugin-vue": "5.2.2",
    "file-loader": "1.1.11",
    "friendly-errors-webpack-plugin": "1.7.0",
    "hash-sum": "1.0.2",
--- a/src/api/role.js
+++ b/src/api/role.js
@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+export function getRoutes() {
+  return request({
+    url: '/routes',
+    method: 'get'
+  })
+}
+
+export function getRoles() {
+  return request({
+    url: '/roles',
+    method: 'get'
+  })
+}
+
+export function deleteRole(id) {
+  return request({
+    url: `/roles/${id}`,
+    method: 'delete'
+  })
+}
+
+export function addRole(data) {
+  return request({
+    url: '/roles',
+    method: 'post',
+    data
+  })
+}
+
+export function updateRole(key, data) {
+  return request({
+    url: `/roles/${key}`,
+    method: 'put',
+    data
+  })
+}
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@ -2,8 +2,9 @@
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{
-        generateTitle(item.meta.title) }}</span>
+        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">
+          {{ generateTitle(item.meta.title) }}
+        </span>
        <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
      </el-breadcrumb-item>
    </transition-group>
--- a/src/components/Charts/keyboard.vue
+++ b/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>
--- a/src/components/Charts/lineMarker.vue
+++ b/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>
--- a/src/components/Charts/mixChart.vue
+++ b/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>
--- a/src/components/Dropzone/index.vue
+++ b/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>
--- a/src/components/GithubCorner/index.vue
+++ b/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>
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@ -1,6 +1,6 @@
 <template>
  <div :class="{'show':show}" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click="click" />
+    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
    <el-select
      ref="headerSearchSelect"
      v-model="search"
@ -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>
@ -33,8 +34,8 @@ export default {
    }
  },
  computed: {
-    routers() {
-      return this.$store.getters.permission_routers
+    routes() {
+      return this.$store.getters.permission_routes
    },
    lang() {
      return this.$store.getters.language
@ -42,10 +43,10 @@ export default {
  },
  watch: {
    lang() {
-      this.searchPool = this.generateRouters(this.routers)
+      this.searchPool = this.generateRoutes(this.routes)
    },
-    routers() {
-      this.searchPool = this.generateRouters(this.routers)
+    routes() {
+      this.searchPool = this.generateRoutes(this.routes)
    },
    searchPool(list) {
      this.initFuse(list)
@ -59,7 +60,7 @@ export default {
    }
  },
  mounted() {
-    this.searchPool = this.generateRouters(this.routers)
+    this.searchPool = this.generateRoutes(this.routes)
  },
  methods: {
    click() {
@ -100,10 +101,10 @@ export default {
    },
    // Filter out the routes that can be displayed in the sidebar
    // And generate the internationalized title
-    generateRouters(routers, basePath = '/', prefixTitle = []) {
+    generateRoutes(routes, basePath = '/', prefixTitle = []) {
      let res = []

-      for (const router of routers) {
+      for (const router of routes) {
        // skip hidden router
        if (router.hidden) { continue }

@ -125,11 +126,11 @@ export default {
          }
        }

-        // recursive child routers
+        // recursive child routes
        if (router.children) {
-          const tempRouters = this.generateRouters(router.children, data.path, data.title)
-          if (tempRouters.length >= 1) {
-            res = [...res, ...tempRouters]
+          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+          if (tempRoutes.length >= 1) {
+            res = [...res, ...tempRoutes]
          }
        }
      }
--- a/src/components/ImageCropper/index.vue
+++ b/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>
--- a/src/components/Kanban/index.vue
+++ b/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>
--- a/src/components/LangSelect/index.vue
+++ b/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==='en'" command="en">English</el-dropdown-item>
-      <el-dropdown-item :disabled="language==='es'" command="es">Español</el-dropdown-item>
+      <el-dropdown-item :disabled="language==='zh'" command="zh">
+        中文
+      </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>
--- a/src/components/MDinput/index.vue
+++ b/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 />
--- a/src/components/Pagination/index.vue
+++ b/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>

--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@ -4,8 +4,9 @@
      <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">{{
-      item.label }}</el-dropdown-item>
+      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
+        {{ item.label }}
+      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
 </template>
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@ -1,6 +1,9 @@
 <template>
  <div :style="{height:height+'px',zIndex:zIndex}">
-    <div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
+    <div
+      :class="className"
+      :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
+    >
      <slot>
        <div>sticky</div>
      </slot>
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@ -1,8 +1,10 @@
 <template>
  <el-color-picker
    v-model="theme"
+    :predefine="['#409EFF', '#11a983', '#13c2c2', '#6959CD', '#f5222d', '#eb2f96', '#DB7093', '#e6a23c', '#8B8989', '#212121']"
    class="theme-picker"
-    popper-class="theme-picker-dropdown"/>
+    popper-class="theme-picker-dropdown"
+  />
 </template>

 <script>
--- a/src/components/Tinymce/components/editorImage.vue
+++ b/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,7 +13,8 @@
        :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-upload>
      <el-button @click="dialogVisible = false">取 消</el-button>
--- a/src/components/TreeTable/index.vue
+++ b/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>
--- a/src/components/TreeTable/readme.md
+++ b/src/components/TreeTable/readme.md
@ -0,0 +1,220 @@
+
+- [Enlgish](#Brief)
+
+# 中文
+
+## 写在前面
+
+此组件仅提供一个创建 `TreeTable` 的解决思路。它基于`element-ui`的 table 组件实现，通过`el-table`的`row-style`方法，在里面判断元素是否需要隐藏或者显示，从而实现`TreeTable`的展开与收起。
+
+并且本组件充分利用 `vue` 插槽的特性来方便用户自定义。
+
+`evel.js` 里面，`addAttrs` 方法会给数据添加几个属性，`treeTotable` 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。
+
+## Props 说明
+
+|    Attribute     | Description                        |  Type   | Default  |
+| :--------------: | :--------------------------------- | :-----: | :------: |
+|       data       | 原始展示数据                       |  Array  |    []    |
+|     columns      | 列属性                             |  Array  |    []    |
+| defaultExpandAll | 默认是否全部展开                   | Boolean |  false   |
+| defaultChildren  | 指定子树为节点对象的某个属性值     | String  | children |  |
+|      indent      | 相邻级节点间的水平缩进，单位为像素 | Number  |    50    |
+
+> 任何 `el-table` 的属性都支持，例如`border`、`fit`、`size`或者`@select`、`@cell-click`等方法。详情属性见`el-table`文档。
+
+---
+
+### 代码示例
+
+```html
+<tree-table :data="data" :columns="columns" border>
+```
+
+#### data(**必填**)
+
+```js
+const data = [
+  {
+    name:'1'
+    children: [
+      {
+        name: '1-1'
+      },
+      {
+        name: '1-2'
+      }
+    ]
+  },
+  {
+    name: `2`
+  }
+]
+```
+
+#### columns(**必填**)
+
+- label: 显示在表头的文字
+- key: 对应 data 的 key。treeTable 将显示相应的 value
+- expand: `true` or `false`。若为 true，则在该列显示展开收起图标
+- checkbox: `true` or `false`。若为 true，则在该列显示`checkbox`
+- width: 每列的宽度，为一个数字(可选)。例如`200`
+- align: 对齐方式 `left/center/right`
+- header-align: 表头对齐方式 `left/center/right`
+
+```javascript
+const columns = [
+  {
+    label: 'Checkbox',
+    checkbox: true
+  },
+  {
+    label: '',
+    key: 'id',
+    expand: true
+  },
+  {
+    label: 'Event',
+    key: 'event',
+    width: 200,
+    align: 'left'
+  },
+  {
+    label: 'Scope',
+    key: 'scope'
+  }
+]
+```
+
+> 树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现
+
+```html
+<template slot="your key" slot-scope="{scope}">
+  <el-tag>level: {{ scope.row._level }}</el-tag>
+  <el-tag>expand: {{ scope.row._expand }}</el-tag>
+  <el-tag>select: {{ scope.row._select }}</el-tag>
+</template>
+```
+
+## Events
+
+目前提供了几个方法，不过只是`beta`版本，之后很可能会修改。
+
+```js
+this.$refs.TreeTable.addChild(row, data) //添加子元素
+this.$refs.TreeTable.addBrother(row, data) //添加兄弟元素
+this.$refs.TreeTable.delete(row) //删除该元素
+```
+
+## 其他
+
+如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue
+
+# English
+
+## Brief
+
+This component only provides a solution for creating `TreeTable`. It is based on the `element-ui` table component. It uses the `row-style` method of `el-table` to determine whether the element needs to be hidden or displayed.
+
+And this component makes full use of the features of the `vue` slot to make it user-friendly.
+
+In `evel.js`, the `addAttrs` method adds several properties to the data, and `treeTotable` flattens the array. None of these operations will destroy the source data, just add properties.
+
+## Props
+
+|    Attribute     | Description                                                  |  Type   | Default  |
+| :--------------: | :----------------------------------------------------------- | :-----: | :------: |
+|       data       | original display data                                        |  Array  |    []    |
+|     columns      | column attribute                                             |  Array  |    []    |
+| defaultExpandAll | whether to expand all nodes by default                       | Boolean |  false   |
+| defaultChildren  | specify which node object is used as the node's subtree      | String  | children |  |
+|      indent      | horizontal indentation of nodes in adjacent levels in pixels | Number  |    50    |
+
+> Any of the `el-table` properties are supported, such as `border`, `fit`, `size` or `@select`, `@cell-click`. See the ʻel-table` documentation for details.
+
+---
+
+### Example
+
+```html
+<tree-table :data="data" :columns="columns" border>
+```
+
+#### data(**Required**)
+
+```js
+const data = [
+  {
+    name:'1'
+    children: [
+      {
+        name: '1-1'
+      },
+      {
+        name: '1-2'
+      }
+    ]
+  },
+  {
+    name: `2`
+  }
+]
+```
+
+#### columns(**Required**)
+
+- label: text displayed in the header
+- key: data.key will show in column
+- expand: `true` or `false`
+- checkbox: `true` or `false`
+- width: column width 。such as `200`
+- align: alignment `left/center/right`
+- header-align: alignment of the table header `left/center/right`
+
+```javascript
+const columns = [
+  {
+    label: 'Checkbox',
+    checkbox: true
+  },
+  {
+    label: '',
+    key: 'id',
+    expand: true
+  },
+  {
+    label: 'Event',
+    key: 'event',
+    width: 200,
+    align: 'left'
+  },
+  {
+    label: 'Scope',
+    key: 'scope'
+  }
+]
+```
+
+> The tree table component will generate a named slot based on the key property of columns. If you need to customize the column data, you can do it through the slot.
+
+```html
+<template slot="your key" slot-scope="{scope}">
+  <el-tag>level: {{ scope.row._level }}</el-tag>
+  <el-tag>expand: {{ scope.row._expand }}</el-tag>
+  <el-tag>select: {{ scope.row._select }}</el-tag>
+</template>
+```
+
+## Events
+
+Several methods are currently available, but only the `beta` version, which is likely to be modified later.
+
+```js
+this.$refs.TreeTable.addChild(row, data) //Add child elements
+this.$refs.TreeTable.addBrother(row, data) //Add a sibling element
+this.$refs.TreeTable.delete(row) //Delete the element
+```
+
+## Other
+
+If you have other requirements, please refer to the [el-table](http://element-cn.eleme.io/#/en-US/component/table) api to modify the index.vue
--- a/src/components/Upload/singleImage.vue
+++ b/src/components/Upload/singleImage.vue
@ -7,7 +7,8 @@
      :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>
    </el-upload>
--- a/src/components/Upload/singleImage2.vue
+++ b/src/components/Upload/singleImage2.vue
@ -7,7 +7,8 @@
      :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>
    </el-upload>
--- a/src/components/Upload/singleImage3.vue
+++ b/src/components/Upload/singleImage3.vue
@ -7,7 +7,8 @@
      :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>
    </el-upload>
--- a/src/lang/en.js
+++ b/src/lang/en.js
@ -6,6 +6,7 @@ export default {
    guide: 'Guide',
    permission: 'Permission',
    pagePermission: 'Page Permission',
+    rolePermission: 'Role Permission',
    directivePermission: 'Directive Permission',
    icons: 'Icons',
    components: 'Components',
@ -56,6 +57,7 @@ export default {
    excel: 'Excel',
    exportExcel: 'Export Excel',
    selectExcel: 'Export Selected',
+    mergeHeader: 'Merge Header',
    uploadExcel: 'Upload Excel',
    zip: 'Zip',
    pdf: 'PDF',
@ -86,9 +88,14 @@ export default {
    github: 'Github Repository'
  },
  permission: {
+    addRole: 'New Role',
+    editPermission: 'Edit Permission',
    roles: 'Your roles',
    switchRoles: 'Switch roles',
-    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.'
+    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
+    delete: 'Delete',
+    confirm: 'Confirm',
+    cancel: 'Cancel'
  },
  guide: {
    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
--- a/src/lang/es.js
+++ b/src/lang/es.js
@ -5,6 +5,7 @@ export default {
    documentation: 'Documentación',
    guide: 'Guía',
    permission: 'Permisos',
+    rolePermission: 'Permisos de rol',
    pagePermission: 'Permisos de la página',
    directivePermission: 'Permisos de la directiva',
    icons: 'Iconos',
@ -56,6 +57,7 @@ export default {
    excel: 'Excel',
    exportExcel: 'Exportar a Excel',
    selectExcel: 'Export seleccionado',
+    mergeHeader: 'Merge Header',
    uploadExcel: 'Subir Excel',
    zip: 'Zip',
    pdf: 'PDF',
@ -86,9 +88,14 @@ export default {
    github: 'Repositorio Github'
  },
  permission: {
+    addRole: 'Nuevo rol',
+    editPermission: 'Permiso de edición',
    roles: 'Tus permisos',
    switchRoles: 'Cambiar permisos',
-    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.'
+    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
+    delete: 'Borrar',
+    confirm: 'Confirmar',
+    cancel: 'Cancelar'
  },
  guide: {
    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@ -5,6 +5,7 @@ export default {
    documentation: '文档',
    guide: '引导页',
    permission: '权限测试页',
+    rolePermission: '角色权限',
    pagePermission: '页面权限',
    directivePermission: '指令权限',
    icons: '图标',
@ -54,9 +55,10 @@ export default {
    page404: '404',
    errorLog: '错误日志',
    excel: 'Excel',
-    exportExcel: 'Export Excel',
-    selectExcel: 'Export Selected',
-    uploadExcel: 'Upload Excel',
+    exportExcel: '导出 Excel',
+    selectExcel: '导出 已选择项',
+    mergeHeader: '导出 多级表头',
+    uploadExcel: '上传 Excel',
    zip: 'Zip',
    pdf: 'PDF',
    exportZip: 'Export Zip',
@ -86,9 +88,14 @@ export default {
    github: 'Github 地址'
  },
  permission: {
+    addRole: '新增角色',
+    editPermission: '编辑权限',
    roles: '你的权限',
    switchRoles: '切换权限',
-    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。'
+    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',
+    delete: '删除',
+    confirm: '确定',
+    cancel: '取消'
  },
  guide: {
    description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
--- a/src/mock/index.js
+++ b/src/mock/index.js
@ -3,6 +3,7 @@ import loginAPI from './login'
 import articleAPI from './article'
 import remoteSearchAPI from './remoteSearch'
 import transactionAPI from './transaction'
+import roleAPI from './role'

 // 修复在使用 MockJS 情况下，设置 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
 // https://github.com/nuysoft/Mock/issues/300
@ -23,6 +24,13 @@ Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
 Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
 Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)

+// 角色相关
+Mock.mock(/\/routes/, 'get', roleAPI.getRoutes)
+Mock.mock(/\/roles/, 'get', roleAPI.getRoles)
+Mock.mock(/\/roles$/, 'post', roleAPI.addRole)
+Mock.mock(/\/roles\/[A-Za-z0-9]+/, 'put', roleAPI.updateRole)
+Mock.mock(/\/roles\/[A-Za-z0-9]+/, 'delete', roleAPI.deleteRole)
+
 // 文章相关
 Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
 Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)
--- a/src/mock/role.js
+++ b/src/mock/role.js
@ -0,0 +1,61 @@
+import Mock from 'mockjs'
+import { deepClone } from '@/utils'
+import { filterAsyncRoutes } from '@/store/modules/permission'
+import { asyncRoutes, constantRoutes } from '@/router'
+
+const routes = deepClone([...constantRoutes, ...asyncRoutes])
+
+const roles = [
+  {
+    key: 'admin',
+    name: 'admin',
+    description: 'Super Administrator. Have access to view all pages.',
+    routes: routes
+  },
+  {
+    key: 'editor',
+    name: 'editor',
+    description: 'Normal Editor. Can see all pages except permission page',
+    routes: filterAsyncRoutes(routes, ['editor'])
+  },
+  {
+    key: 'visitor',
+    name: 'visitor',
+    description: 'Just a visitor. Can only see the home page and the document page',
+    routes: [{
+      path: '',
+      redirect: 'dashboard',
+      children: [
+        {
+          path: 'dashboard',
+          name: 'Dashboard',
+          meta: { title: 'dashboard', icon: 'dashboard' }
+        }
+      ]
+    }]
+  }
+]
+
+export default {
+  getRoutes() {
+    return routes
+  },
+  getRoles() {
+    return roles
+  },
+  addRole() {
+    return Mock.mock('@integer(300, 5000)')
+  },
+  updateRole() {
+    const res = {
+      data: 'success'
+    }
+    return res
+  },
+  deleteRole() {
+    const res = {
+      data: 'success'
+    }
+    return res
+  }
+}
--- a/src/permission.js
+++ b/src/permission.js
@ -3,13 +3,13 @@ import store from './store'
 import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-import { getToken } from '@/utils/auth' // getToken from cookie
+import { getToken } from '@/utils/auth' // get token from cookie

 NProgress.configure({ showSpinner: false }) // NProgress Configuration

 // permission judge function
 function hasPermission(roles, permissionRoles) {
-  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
+  if (roles.includes('admin')) return true // admin permission passed directly
  if (!permissionRoles) return true
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
 }
@ -18,20 +18,28 @@ const whiteList = ['/login', '/auth-redirect']// no redirect whitelist

 router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
-  if (getToken()) { // determine if there has token
+  if (getToken()) {
+    // determine if there has token
+
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
    } else {
-      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetUserInfo').then(res => { // 拉取user_info
-          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
-          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
-            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
+      if (store.getters.roles.length === 0) {
+        // 判断当前用户是否已拉取完user_info信息
+        store
+          .dispatch('GetUserInfo')
+          .then(res => {
+            // 拉取user_info
+            const roles = res.data.roles // note: roles must be a object array! such as: [{id: '1', name: 'editor'}, {id: '2', name: 'developer'}]
+            store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
+              // 根据roles权限生成可访问的路由表
+              router.addRoutes(accessRoutes) // 动态添加可访问路由表
              next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
            })
-        }).catch((err) => {
+          })
+          .catch(err => {
            store.dispatch('FedLogOut').then(() => {
              Message.error(err)
              next({ path: '/' })
@ -49,7 +57,8 @@ router.beforeEach((to, from, next) => {
    }
  } else {
    /* has no token*/
-    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
+    if (whiteList.indexOf(to.path) !== -1) {
+      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
--- a/src/router/index.js
+++ b/src/router/index.js
@ -33,7 +33,7 @@ import nestedRouter from './modules/nested'
    affix: true                  if true, the tag will affix in the tags-view
  }
 **/
-export const constantRouterMap = [
+export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
@ -81,7 +81,6 @@ export const constantRouterMap = [
  {
    path: '/documentation',
    component: Layout,
-    redirect: '/documentation/index',
    children: [
      {
        path: 'index',
@ -109,10 +108,10 @@ export const constantRouterMap = [
 export default new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRouterMap
+  routes: constantRoutes
 })

-export const asyncRouterMap = [
+export const asyncRoutes = [
  {
    path: '/permission',
    component: Layout,
@ -141,6 +140,15 @@ export const asyncRouterMap = [
          title: 'directivePermission'
          // if do not set roles, means: this page does not require permission
        }
+      },
+      {
+        path: 'role',
+        component: () => import('@/views/permission/role'),
+        name: 'RolePermission',
+        meta: {
+          title: 'rolePermission',
+          roles: ['admin']
+        }
      }
    ]
  },
@ -271,6 +279,12 @@ export const asyncRouterMap = [
        name: 'SelectExcel',
        meta: { title: 'selectExcel' }
      },
+      {
+        path: 'export-merge-header',
+        component: () => import('@/views/excel/mergeHeader'),
+        name: 'MergeHeader',
+        meta: { title: 'mergeHeader' }
+      },
      {
        path: 'upload-excel',
        component: () => import('@/views/excel/uploadExcel'),
--- a/src/store/getters.js
+++ b/src/store/getters.js
@ -12,8 +12,8 @@ const getters = {
  status: state => state.user.status,
  roles: state => state.user.roles,
  setting: state => state.user.setting,
-  permission_routers: state => state.permission.routers,
-  addRouters: state => state.permission.addRouters,
+  permission_routes: state => state.permission.routes,
+  addRoutes: state => state.permission.addRoutes,
  errorLogs: state => state.errorLog.logs
 }
 export default getters
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@ -1,4 +1,4 @@
-import { asyncRouterMap, constantRouterMap } from '@/router'
+import { asyncRoutes, constantRoutes } from '@/router'

 /**
 * 通过meta.role判断是否与当前用户权限匹配
@ -15,17 +15,17 @@ function hasPermission(roles, route) {

 /**
 * 递归过滤异步路由表，返回符合用户角色权限的路由表
- * @param routes asyncRouterMap
+ * @param routes asyncRoutes
 * @param roles
 */
-function filterAsyncRouter(routes, roles) {
+export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
-        tmp.children = filterAsyncRouter(tmp.children, roles)
+        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
@ -36,27 +36,27 @@ function filterAsyncRouter(routes, roles) {

 const permission = {
  state: {
-    routers: [],
-    addRouters: []
+    routes: [],
+    addRoutes: []
  },
  mutations: {
-    SET_ROUTERS: (state, routers) => {
-      state.addRouters = routers
-      state.routers = constantRouterMap.concat(routers)
+    SET_ROUTES: (state, routes) => {
+      state.addRoutes = routes
+      state.routes = constantRoutes.concat(routes)
    }
  },
  actions: {
    GenerateRoutes({ commit }, data) {
      return new Promise(resolve => {
        const { roles } = data
-        let accessedRouters
+        let accessedRoutes
        if (roles.includes('admin')) {
-          accessedRouters = asyncRouterMap
+          accessedRoutes = asyncRoutes
        } else {
-          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
+          accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
        }
-        commit('SET_ROUTERS', accessedRouters)
-        resolve()
+        commit('SET_ROUTES', accessedRoutes)
+        resolve(accessedRoutes)
      })
    }
  }
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -274,7 +274,7 @@ export function debounce(func, wait, immediate) {
 */
 export function deepClone(source) {
  if (!source && typeof source !== 'object') {
-    throw new Error('error arguments', 'shallowClone')
+    throw new Error('error arguments', 'deepClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach(keys => {
--- a/src/vendor/Export2Excel.js
+++ b/src/vendor/Export2Excel.js
@ -145,9 +145,11 @@ export function export_table_to_excel(id) {
 }

 export function export_json_to_excel({
+  multiHeader = [],
  header,
  data,
  filename,
+  merges = [],
  autoWidth = true,
  bookType=  'xlsx'
 } = {}) {
@ -155,10 +157,22 @@ export function export_json_to_excel({
  filename = filename || 'excel-list'
  data = [...data]
  data.unshift(header);
+
+  for (let i = multiHeader.length-1; i > -1; i--) {
+    data.unshift(multiHeader[i])
+  }
+
  var ws_name = "SheetJS";
  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data);

+  if (merges.length > 0) {
+    if (!ws['!merges']) ws['!merges'] = [];
+    merges.forEach(item => {
+      ws['!merges'].push(XLSX.utils.decode_range(item))
+    })
+  }
+
  if (autoWidth) {
    /*设置worksheet每列的最大宽度*/
    const colWidth = data.map(row => row.map(val => {
--- a/src/views/components-demo/avatarUpload.vue
+++ b/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>

--- a/src/views/components-demo/countTo.vue
+++ b/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">
@ -40,9 +41,11 @@
        <input v-model="setSuffix" name="suffixInput">
      </label>
    </div>
-    <code>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
+    <code>
+      &lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
      :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
-    :autoplay=false&gt;</code>
+      :autoplay=false&gt;
+    </code>
  </div>
 </template>

--- a/src/views/components-demo/dragSelect.vue
+++ b/src/views/components-demo/dragSelect.vue
@ -2,7 +2,7 @@
  <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;">
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@ -33,6 +33,7 @@
    </div>

    <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">Get HTML</el-button>
+    <!-- eslint-disable-next-line -->
    <div v-html="html" />

  </div>
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@ -92,7 +92,6 @@
        </el-card>
      </el-col>
    </el-row>
-
  </div>
 </template>

--- a/src/views/components-demo/sticky.vue
+++ b/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>
@ -29,7 +29,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>

@ -48,7 +49,9 @@
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
-      <div>placeholder</div>
+      <sticky :sticky-top="200">
+        <el-button type="primary"> placeholder</el-button>
+      </sticky>
      <div>placeholder</div>
      <div>placeholder</div>
      <div>placeholder</div>
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@ -5,8 +5,9 @@
      <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>
+    <!-- eslint-disable-next-line -->
    <div class="editor-content" v-html="content" />
  </div>
 </template>
--- a/src/views/dashboard/admin/components/TodoList/Todo.vue
+++ b/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>

--- a/src/views/dashboard/admin/components/TodoList/index.vue
+++ b/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 -->
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/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>
--- a/src/views/dashboard/editor/index.vue
+++ b/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;" />
--- a/src/views/errorPage/404.vue
+++ b/src/views/errorPage/404.vue
@ -9,7 +9,8 @@
      </div>
      <div class="bullshit">
        <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">版权所有
+        <div class="bullshit__info">
+          版权所有
          <a class="link-type" href="https://wallstreetcn.com" target="_blank">华尔街见闻</a>
        </div>
        <div class="bullshit__headline">{{ message }}</div>
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@ -6,7 +6,8 @@
        <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>
      </sticky>
@ -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;">
--- a/src/views/example/components/Dropdown/Comment.vue
+++ b/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="false">打开评论</el-radio>
+          <el-radio :label="true">
+            关闭评论
+          </el-radio>
+          <el-radio :label="false">
+            打开评论
+          </el-radio>
        </el-radio-group>
      </el-dropdown-item>
    </el-dropdown-menu>
--- a/src/views/example/components/Dropdown/Platform.vue
+++ b/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>
--- a/src/views/example/components/Dropdown/SourceUrl.vue
+++ b/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>
--- a/src/views/example/components/Warning.vue
+++ b/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>

--- a/src/views/excel/components/BookTypeOption.vue
+++ b/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>
--- a/src/views/excel/components/FilenameOption.vue
+++ b/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>

--- a/src/views/excel/exportExcel.vue
+++ b/src/views/excel/exportExcel.vue
@ -46,12 +46,10 @@
 <script>
 import { fetchList } from '@/api/article'
 import { parseTime } from '@/utils'
-
 // options components
 import FilenameOption from './components/FilenameOption'
 import AutoWidthOption from './components/AutoWidthOption'
 import BookTypeOption from './components/BookTypeOption'
-
 export default {
  name: 'ExportExcel',
  components: { FilenameOption, AutoWidthOption, BookTypeOption },
@ -114,4 +112,3 @@ export default {
  padding: 0 12px 0 30px;
 }
 </style>
-
--- a/src/views/excel/mergeHeader.vue
+++ b/src/views/excel/mergeHeader.vue
@ -0,0 +1,101 @@
+<template>
+  <div class="app-container">
+
+    <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">Export</el-button>
+
+    <el-table
+      ref="multipleTable"
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column align="center" label="Id" width="95">
+        <template slot-scope="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="Main Information" align="center">
+        <el-table-column label="Title">
+          <template slot-scope="scope">
+            {{ scope.row.title }}
+          </template>
+        </el-table-column>
+        <el-table-column label="Author" width="110" align="center">
+          <template slot-scope="scope">
+            <el-tag>{{ scope.row.author }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="Readings" width="115" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.pageviews }}
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column align="center" label="Date" width="220">
+        <template slot-scope="scope">
+          <i class="el-icon-time" />
+          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+  </div>
+</template>
+
+<script>
+import { fetchList } from '@/api/article'
+import { parseTime } from '@/utils'
+
+export default {
+  name: 'MergeHeader',
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      downloadLoading: false
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      })
+    },
+    handleDownload() {
+      this.downloadLoading = true
+        import('@/vendor/Export2Excel').then(excel => {
+          const multiHeader = [['Id', 'Main Information', '', '', 'Date']]
+          const header = ['', 'Title', 'Author', 'Readings', '']
+          const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
+          const list = this.list
+          const data = this.formatJson(filterVal, list)
+          const merges = ['A1:A2', 'B1:D1', 'E1:E2']
+          excel.export_json_to_excel({
+            multiHeader,
+            header,
+            merges,
+            data
+          })
+          this.downloadLoading = false
+        })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'timestamp') {
+          return parseTime(v[j])
+        } else {
+          return v[j]
+        }
+      }))
+    }
+  }
+}
+</script>
--- a/src/views/excel/selectExcel.vue
+++ b/src/views/excel/selectExcel.vue
@ -1,20 +1,21 @@
 <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>
    <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">
--- a/src/views/excel/uploadExcel.vue
+++ b/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>
--- a/src/views/i18n-demo/index.vue
+++ b/src/views/i18n-demo/index.vue
@ -26,7 +26,8 @@
              v-for="item in options"
              :key="item.value"
              :label="item.label"
-              :value="item.value"/>
+              :value="item.value"
+            />
          </el-select>
        </div>
        <div class="block">
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@ -15,11 +15,12 @@
      </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>
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@ -9,7 +9,7 @@
      :collapse-transition="false"
      mode="vertical"
    >
-      <sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path"/>
+      <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
    </el-menu>
  </el-scrollbar>
 </template>
@ -23,7 +23,7 @@ export default {
  components: { SidebarItem },
  computed: {
    ...mapGetters([
-      'permission_routers',
+      'permission_routes',
      'sidebar'
    ]),
    variables() {
--- a/src/views/layout/components/TagsView/index.vue
+++ b/src/views/layout/components/TagsView/index.vue
@ -4,21 +4,23 @@
      <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 v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">{{
-      $t('tagsView.close') }}</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">
+        {{ $t('tagsView.close') }}
+      </li>
      <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
      <li @click="closeAllTags(selectedTag)">{{ $t('tagsView.closeAll') }}</li>
    </ul>
@ -45,8 +47,8 @@ export default {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    },
-    routers() {
-      return this.$store.state.permission.routers
+    routes() {
+      return this.$store.state.permission.routes
    }
  },
  watch: {
@ -93,7 +95,7 @@ export default {
      return tags
    },
    initTags() {
-      const affixTags = this.affixTags = this.filterAffixTags(this.routers)
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
      for (const tag of affixTags) {
        // Must have tag name
        if (tag.name) {
--- a/src/views/pdf/download.vue
+++ b/src/views/pdf/download.vue
@ -6,6 +6,7 @@
    <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>
    </div>
+    <!-- eslint-disable-next-line -->
    <div ref="content" class="node-article-content" v-html="article.content" />
  </div>
 </template>
--- a/src/views/permission/role.vue
+++ b/src/views/permission/role.vue
@ -0,0 +1,268 @@
+<template>
+  <div class="app-container">
+    <el-button type="primary" @click="handleAddRole">{{ $t('permission.addRole') }}</el-button>
+
+    <el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
+      <el-table-column align="center" label="Role Key" width="220">
+        <template slot-scope="scope">{{ scope.row.key }}</template>
+      </el-table-column>
+      <el-table-column align="center" label="Role Name" width="220">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column align="header-center" label="Description">
+        <template slot-scope="scope">{{ scope.row.description }}</template>
+      </el-table-column>
+      <el-table-column align="center" label="Operations">
+        <template slot-scope="scope">
+          <el-button type="primary" size="small" @click="handleEdit(scope)">{{ $t('permission.editPermission') }}</el-button>
+          <el-button type="danger" size="small" @click="handleDelete(scope)">{{ $t('permission.delete') }}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit Role':'New Role'">
+      <el-form :model="role" label-width="80px" label-position="left">
+        <el-form-item label="Name">
+          <el-input v-model="role.name" placeholder="Role Name" />
+        </el-form-item>
+        <el-form-item label="Desc">
+          <el-input
+            v-model="role.description"
+            :autosize="{ minRows: 2, maxRows: 4}"
+            type="textarea"
+            placeholder="Role Description"
+          />
+        </el-form-item>
+        <el-form-item label="Menus">
+          <el-tree ref="tree" :check-strictly="checkStrictly" :data="routesData" :props="defaultProps" show-checkbox node-key="path" class="permission-tree" />
+        </el-form-item>
+      </el-form>
+      <div style="text-align:right;">
+        <el-button type="danger" @click="dialogVisible=false">{{ $t('permission.cancel') }}</el-button>
+        <el-button type="primary" @click="confirmRole">{{ $t('permission.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import path from 'path'
+import { deepClone } from '@/utils'
+import { getRoutes, getRoles, addRole, deleteRole, updateRole } from '@/api/role'
+import i18n from '@/lang'
+
+const defaultRole = {
+  key: '',
+  name: '',
+  description: '',
+  routes: []
+}
+
+export default {
+  data() {
+    return {
+      role: Object.assign({}, defaultRole),
+      routes: [],
+      rolesList: [],
+      dialogVisible: false,
+      dialogType: 'new',
+      checkStrictly: false,
+      defaultProps: {
+        children: 'children',
+        label: 'title'
+      }
+    }
+  },
+  computed: {
+    routesData() {
+      return this.routes
+    }
+  },
+  created() {
+    // Mock: get all routes and roles list from server
+    this.getRoutes()
+    this.getRoles()
+  },
+  methods: {
+    async getRoutes() {
+      const res = await getRoutes()
+      this.serviceRoutes = res.data
+      const routes = this.generateRoutes(res.data)
+      this.routes = this.i18n(routes)
+    },
+    async getRoles() {
+      const res = await getRoles()
+      this.rolesList = res.data
+    },
+    i18n(routes) {
+      const app = routes.map(route => {
+        route.title = i18n.t(`route.${route.title}`)
+        if (route.children) {
+          route.children = this.i18n(route.children)
+        }
+        return route
+      })
+      return app
+    },
+    // Reshape the routes structure so that it looks the same as the sidebar
+    generateRoutes(routes, basePath = '/') {
+      const res = []
+
+      for (let route of routes) {
+        // skip some route
+        if (route.hidden) { continue }
+
+        const onlyOneShowingChild = this.onlyOneShowingChild(route.children, route)
+
+        if (route.children && onlyOneShowingChild && !route.alwaysShow) {
+          route = onlyOneShowingChild
+        }
+
+        const data = {
+          path: path.resolve(basePath, route.path),
+          title: route.meta && route.meta.title
+
+        }
+
+        // recursive child routes
+        if (route.children) {
+          data.children = this.generateRoutes(route.children, data.path)
+        }
+        res.push(data)
+      }
+      return res
+    },
+    generateArr(routes) {
+      let data = []
+      routes.forEach(route => {
+        data.push(route)
+        if (route.children) {
+          const temp = this.generateArr(route.children)
+          if (temp.length > 0) {
+            data = [...data, ...temp]
+          }
+        }
+      })
+      return data
+    },
+    handleAddRole() {
+      this.role = Object.assign({}, defaultRole)
+      if (this.$refs.tree) {
+        this.$refs.tree.setCheckedNodes([])
+      }
+      this.dialogType = 'new'
+      this.dialogVisible = true
+    },
+    handleEdit(scope) {
+      this.dialogType = 'edit'
+      this.dialogVisible = true
+      this.checkStrictly = true
+      this.role = deepClone(scope.row)
+      this.$nextTick(() => {
+        const routes = this.generateRoutes(this.role.routes)
+        this.$refs.tree.setCheckedNodes(this.generateArr(routes))
+        // set checked state of a node not affects its father and child nodes
+        this.checkStrictly = false
+      })
+    },
+    handleDelete({ $index, row }) {
+      this.$confirm('Confirm to remove the role?', 'Warning', {
+        confirmButtonText: 'Confirm',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      })
+        .then(async() => {
+          await deleteRole(row.id)
+          this.rolesList.splice($index, 1)
+          this.$message({
+            type: 'success',
+            message: 'Delete succed!'
+          })
+        })
+        .catch(err => { console.error(err) })
+    },
+    generateTree(routes, basePath = '/', checkedKeys) {
+      const res = []
+
+      for (const route of routes) {
+        const routePath = path.resolve(basePath, route.path)
+
+        // recursive child routes
+        if (route.children) {
+          route.children = this.generateTree(route.children, routePath, checkedKeys)
+        }
+
+        if (checkedKeys.includes(routePath) || (route.children && route.children.length >= 1)) {
+          res.push(route)
+        }
+      }
+      return res
+    },
+    async confirmRole() {
+      const isEdit = this.dialogType === 'edit'
+
+      const checkedKeys = this.$refs.tree.getCheckedKeys()
+      this.role.routes = this.generateTree(deepClone(this.serviceRoutes), '/', checkedKeys)
+
+      if (isEdit) {
+        await updateRole(this.role.key, this.role)
+        for (let index = 0; index < this.rolesList.length; index++) {
+          if (this.rolesList[index].key === this.role.key) {
+            this.rolesList.splice(index, 1, Object.assign({}, this.role))
+            break
+          }
+        }
+      } else {
+        const { data } = await addRole(this.role)
+        this.role.key = data
+        this.rolesList.push(this.role)
+      }
+
+      const { description, key, name } = this.role
+      this.dialogVisible = false
+      this.$notify({
+        title: 'Success',
+        dangerouslyUseHTMLString: true,
+        message: `
+            <div>Role Key: ${key}</div>
+            <div>Role Nmae: ${name}</div>
+            <div>Description: ${description}</div>
+          `,
+        type: 'success'
+      })
+    },
+    // reference: src/view/layout/components/Sidebar/SidebarItem.vue
+    onlyOneShowingChild(children = [], parent) {
+      let onlyOneChild = null
+      const showingChildren = children.filter(item => !item.hidden)
+
+      // When there is only one child route, the child route is displayed by default
+      if (showingChildren.length === 1) {
+        onlyOneChild = showingChildren[0]
+        onlyOneChild.path = path.resolve(parent.path, onlyOneChild.path)
+        return onlyOneChild
+      }
+
+      // Show parent if there are no child route to display
+      if (showingChildren.length === 0) {
+        onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return onlyOneChild
+      }
+
+      return false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .roles-table {
+    margin-top: 30px;
+  }
+  .permission-tree {
+    margin-bottom: 30px;
+  }
+}
+</style>
--- a/src/views/tab/components/tabPane.vue
+++ b/src/views/tab/components/tabPane.vue
@ -6,7 +6,8 @@
      align="center"
      label="ID"
      width="65"
-      element-loading-text="请给我点时间！">
+      element-loading-text="请给我点时间！"
+    >
      <template slot-scope="scope">
        <span>{{ scope.row.id }}</span>
      </template>
@ -45,7 +46,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>

--- a/src/views/tab/index.vue
+++ b/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>
--- a/src/views/table/complexTable.vue
+++ b/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>
@ -18,14 +18,15 @@
    </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>
@ -71,11 +72,14 @@
      <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 v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">{{ $t('table.publish') }}
+          <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!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">{{ $t('table.draft') }}
+          <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 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,7 +109,7 @@
          <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">
--- a/src/views/table/dragTable.vue
+++ b/src/views/table/dragTable.vue
@ -1,7 +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">
--- a/src/views/table/dynamicTable/fixedThead.vue
+++ b/src/views/table/dynamicTable/fixedThead.vue
@ -9,7 +9,7 @@
      </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">
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@ -33,7 +33,7 @@
    </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>
--- a/src/views/tree-table/custom/index.vue
+++ b/src/views/tree-table/custom/index.vue
@ -38,7 +38,8 @@
                :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>
--- a/src/views/tree-table/index.vue
+++ b/src/views/tree-table/index.vue
@ -13,7 +13,8 @@
          v-model="defaultExpandAll"
          active-color="#13ce66"
          inactive-color="#ff4949"
-          @change="reset"/>
+          @change="reset"
+        />
      </div>

      <div class="option-item">
--- a/src/views/zip/index.vue
+++ b/src/views/zip/index.vue
@ -1,7 +1,7 @@
 <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-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column align="center" label="ID" width="95">