refactor: update element-ui 2.0

src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-default/index.css'
+import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/en'
 import App from './App'
 import router from './router'

src/styles/index.scss

@@ -17,6 +17,10 @@ html {
   box-sizing: inherit;
 }
 
+div:focus{
+  outline: none;
+}
+
 a:focus,
 a:active {
   outline: none;

src/views/page/form.vue

@@ -20,7 +20,7 @@
         </el-col>
       </el-form-item>
       <el-form-item label="Instant delivery">
-        <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
+        <el-switch v-model="form.delivery"></el-switch>
       </el-form-item>
       <el-form-item label="Activity type">
         <el-checkbox-group v-model="form.type">
@@ -70,3 +70,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.line{
+  text-align: center;
+}
+</style>
+

src/views/table/index.vue

@@ -2,32 +2,32 @@
   <div class="app-container">
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
       <el-table-column align="center" label='ID' width="95">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.$index}}
         </template>
       </el-table-column>
       <el-table-column label="Title">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.row.title}}
         </template>
       </el-table-column>
       <el-table-column label="Author" width="110" align="center">
-        <template scope="scope">
+        <template slot-scope="scope">
           <span>{{scope.row.author}}</span>
         </template>
       </el-table-column>
       <el-table-column label="Pageviews" width="110" align="center">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
       <el-table-column class-name="status-col" label="Status" width="110" align="center">
-        <template scope="scope">
+        <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
         </template>
       </el-table-column>
       <el-table-column align="center" prop="created_at" label="Display_time" width="200">
-        <template scope="scope">
+        <template slot-scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.display_time}}</span>
         </template>