⚡ edit list.vue

Author: xrr2016

data.js

@@ -49,4 +49,4 @@ function fetchData(count) {
     })
 }
 
-fetchData(50)
+fetchData(5)

src/App.vue

@@ -1,8 +1,11 @@
 <template>
   <div id="app">
-    <mu-appbar title="Title">
-      <mu-icon-button icon='menu' slot="left"/>
-      <mu-icon-button icon='expand_more' slot="right"/>
+    <mu-appbar>
+      {{ title }}
+      <mu-icon-menu icon="menu" class="icon-menu">
+        <mu-menu-item title="Help" />
+        <mu-menu-item title="Sign out" />
+      </mu-icon-menu>
     </mu-appbar>
     <router-view></router-view>
   </div>
@@ -13,7 +16,7 @@ export default {
   name: 'app',
   data(){
     return {
-      title  : 'Movie List'
+      title  : '电影列表'
     }
   }
 }
@@ -33,4 +36,8 @@ export default {
 .title{
   letter-spacing: 1px;
 }
+.icon-menu{
+  float: right;
+  margin-right: 30px;
+}
 </style>

src/components/List.vue

@@ -1,6 +1,35 @@
 <template lang="html">
   <div class="list">
-    List.vue
+    <mu-table :fixedHeader="true" :showCheckbox="false" >
+        <mu-thead>
+          <mu-tr>
+            <mu-th>ID</mu-th>
+            <mu-th>电影海报</mu-th>
+            <mu-th>电影名称</mu-th>
+            <mu-th>上映年份</mu-th>
+            <mu-th>主要演员</mu-th>
+            <mu-th>评分</mu-th>
+            <mu-th>操作</mu-th>
+          </mu-tr>
+        </mu-thead>
+        <mu-tbody>
+          <mu-tr v-for="movie of movies">
+            <mu-td>{{ movie.id }}</mu-td>
+            <mu-td><img :src="movie.image" :title="movie.original_title"></mu-td>
+            <mu-td>{{ movie.title }}</mu-td>
+            <mu-td>{{ movie.year }}</mu-td>
+            <mu-td>
+              <p v-for="cast of movie.casts">{{ cast.name }}</p>
+            </mu-td>
+            <mu-td>{{ movie.rating }}</mu-td>
+            <mu-td>
+              <mu-raised-button label="修改" primary/>
+              <mu-raised-button label="删除" secondary/>
+            </mu-td>
+          </mu-tr>
+        </mu-tbody>
+    </mu-table>
+    <mu-float-button icon="add" class="add-movie-btn"/>
   </div>
 </template>
 
@@ -19,7 +48,6 @@ export default {
       this.$http.get('/api/movie')
            .then(res => {
              this.movies = res.data
-             console.dir(res.data[0])
            })
            .catch(err => {
               toastr.error(`${err.message}`,'ERROR!')
@@ -33,4 +61,8 @@ export default {
 <style lang="css">
   .list{
   }
+  .add-movie-btn{
+    position: fixed;
+    bottom: 50px;
+  }
 </style>

src/main.js

@@ -33,7 +33,9 @@ toastr.options = {
 //   const prefix = "https://images.weserv.nl/?url="
 //   return prefix + url
 // })
-
+Vue.filter('castsToString',(casts) => {
+  return casts.map((item) => {return item.name}).toString().replace(/\,/g,"\n")
+})
 
 /* eslint-disable no-new */
 new Vue({