Przeglądaj źródła

refactor: update element-ui 2.0

Pan 7 lat temu
rodzic
commit
cd047c5ac4
4 zmienionych plików z 19 dodań i 8 usunięć
  1. 1 1
      src/main.js
  2. 4 0
      src/styles/index.scss
  3. 8 1
      src/views/page/form.vue
  4. 6 6
      src/views/table/index.vue

+ 1 - 1
src/main.js

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

+ 4 - 0
src/styles/index.scss

17
   box-sizing: inherit;
17
   box-sizing: inherit;
18
 }
18
 }
19
 
19
 
20
+div:focus{
21
+  outline: none;
22
+}
23
+
20
 a:focus,
24
 a:focus,
21
 a:active {
25
 a:active {
22
   outline: none;
26
   outline: none;

+ 8 - 1
src/views/page/form.vue

20
         </el-col>
20
         </el-col>
21
       </el-form-item>
21
       </el-form-item>
22
       <el-form-item label="Instant delivery">
22
       <el-form-item label="Instant delivery">
23
-        <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
23
+        <el-switch v-model="form.delivery"></el-switch>
24
       </el-form-item>
24
       </el-form-item>
25
       <el-form-item label="Activity type">
25
       <el-form-item label="Activity type">
26
         <el-checkbox-group v-model="form.type">
26
         <el-checkbox-group v-model="form.type">
70
   }
70
   }
71
 }
71
 }
72
 </script>
72
 </script>
73
+
74
+<style scoped>
75
+.line{
76
+  text-align: center;
77
+}
78
+</style>
79
+

+ 6 - 6
src/views/table/index.vue

2
   <div class="app-container">
2
   <div class="app-container">
3
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
3
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
4
       <el-table-column align="center" label='ID' width="95">
4
       <el-table-column align="center" label='ID' width="95">
5
-        <template scope="scope">
5
+        <template slot-scope="scope">
6
           {{scope.$index}}
6
           {{scope.$index}}
7
         </template>
7
         </template>
8
       </el-table-column>
8
       </el-table-column>
9
       <el-table-column label="Title">
9
       <el-table-column label="Title">
10
-        <template scope="scope">
10
+        <template slot-scope="scope">
11
           {{scope.row.title}}
11
           {{scope.row.title}}
12
         </template>
12
         </template>
13
       </el-table-column>
13
       </el-table-column>
14
       <el-table-column label="Author" width="110" align="center">
14
       <el-table-column label="Author" width="110" align="center">
15
-        <template scope="scope">
15
+        <template slot-scope="scope">
16
           <span>{{scope.row.author}}</span>
16
           <span>{{scope.row.author}}</span>
17
         </template>
17
         </template>
18
       </el-table-column>
18
       </el-table-column>
19
       <el-table-column label="Pageviews" width="110" align="center">
19
       <el-table-column label="Pageviews" width="110" align="center">
20
-        <template scope="scope">
20
+        <template slot-scope="scope">
21
           {{scope.row.pageviews}}
21
           {{scope.row.pageviews}}
22
         </template>
22
         </template>
23
       </el-table-column>
23
       </el-table-column>
24
       <el-table-column class-name="status-col" label="Status" width="110" align="center">
24
       <el-table-column class-name="status-col" label="Status" width="110" align="center">
25
-        <template scope="scope">
25
+        <template slot-scope="scope">
26
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
26
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
27
         </template>
27
         </template>
28
       </el-table-column>
28
       </el-table-column>
29
       <el-table-column align="center" prop="created_at" label="Display_time" width="200">
29
       <el-table-column align="center" prop="created_at" label="Display_time" width="200">
30
-        <template scope="scope">
30
+        <template slot-scope="scope">
31
           <i class="el-icon-time"></i>
31
           <i class="el-icon-time"></i>
32
           <span>{{scope.row.display_time}}</span>
32
           <span>{{scope.row.display_time}}</span>
33
         </template>
33
         </template>