leyou_04_使用vue.js搭建页面—使用ajax完成品牌的查询

1.使用vue.js搭建页面

　1.1使用的模板插件Vuetify

　　中文UI组件官网:https://vuetifyjs.com/zh-Hans/getting-started/quick-start

　1.2要实现的效果

 　1.3创建Brand.vue初始化页面

<template>
  <span>
    hello
  </span>
</template>

<script>
  export default {
    name: "myBrand"
  }
</script>

<!-- scoped:当前样式只作用于当前组件的节点 -->
<style scoped>

</style>

　　1.4首先是一个5列的表格 选用这个

　　1.5复制模版

<template>
  <div>
    <v-data-table
      :headers="headers"  
      :items="brand"
      :pagination.sync="pagination"
      :total-items="totalDesserts"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
  </div>
</template>

　　headers：表头信息，是一个数组也就是表格的列信息

　　text:表格列的名称   value:该列关联的字段   align:对齐方式   sortable:是否需要排默认false

headers: [
          {text: '品牌id', value: 'id', align: 'center', sortable: true},
          {text: '品牌名称', value: 'name', align: 'center', sortable: false},
          {text: '品牌LoGo', value: 'image', align: 'center', sortable: false},
          {text: '品牌首字母', value: 'letter', align: 'center', sortable: true},
          {text: '操作', align: 'center', sortable: false},

        ],

• items：要在表格中展示的数据，数组结构，每一个元素是一行。在这里应该是品牌集合

• pagination.sync：分页信息，包含了当前页，每页大小，排序字段，排序方式等。加上.sync代表服务端排序，当用户点击分页条时，该对象的值会跟着变化。监控这个值，并在这个值变化时去服务端查询，即可实现页面数据动态加载了。

• total-items：总条数，在这里是品牌的总记录数

• loading：boolean类型，true：代表数据正在加载，会有进度条。false：数据加载完毕。　

<template slot="items" slot-scope="props">
   这段就是在渲染每一行的数据。Vue会自动遍历上面传递的items属性，并把得到的对象传递给这段template中的props.item属性。我们从中得到数据，渲染在页面即可。

1.6页面搭建完成接下来只需要使用watch监控页面数据发生改变时发送相应的ajax请求

<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div>
    <v-layout class="px-3 pb-2">
      <v-flex xs2>
        <v-btn color="info" small>新增品牌</v-btn>
      </v-flex>
      <v-spacer/>
      <v-flex xs4>
        <v-col cols="12" sm="6" md="3">
          <v-text-field label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
        </v-col>
      </v-flex>
    </v-layout>
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :toatl-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{props.item.id}}</td>
        <td class="text-xs-center">{{props.item.name}}</td>
        <td class="text-xs-center"><img v-if="props.item.image" v-bind:src="props.item.image" width="130" height="40"/>
        </td>
        <td class="text-xs-center">{{props.item.letter}}</td>
        <td class="text-xs-center">
          <v-btn color="success" small>修改</v-btn>
          <v-btn color="error" small>删除</v-btn>
        </td>

      </template>

    </v-data-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        totalDesserts: 0,
        desserts: [],
        loading: true,
        options: {},
        headers: [
          {text: '品牌id', value: 'id', align: 'center', sortable: true},
          {text: '品牌名称', value: 'name', align: 'center', sortable: false},
          {text: '品牌LoGo', value: 'image', align: 'center', sortable: false},
          {text: '品牌首字母', value: 'letter', align: 'center', sortable: true},
          {text: '操作', align: 'center', sortable: false},

        ],
        brands: [],
        pagination: {},
        totalBrands: 0,
        loading: false,
        key: "",//搜索条件
      }
    },
  }
</script>

<style scoped>

</style>

在列的最后增加一列图标

<template slot="items" slot-scope="props">        <td class="text-xs-center">          <v-btn color="success" small>修改
　　　　　　　<v-icon>edit</v-icon>//用一个图标来代替修改　
</v-btn>          <v-btn color="error" small>删除</v-btn>        </td></template>