vue之vuetify组件表单创建,搜素新增通用模板

vue之vuetify组件表单创建,搜素新增模板

<template>
  <div>
      <v-layout>
        <v-flex xs2>
           <v-btn color="success">新增品牌</v-btn>
        </v-flex>
        <v-spacer/>
        <v-flex xs4>
          <v-text-field name="input-3" label="搜索" value="" hide-details ></v-text-field>
        </v-flex>
      </v-layout>
       <v-data-table
      :headers="headers"
      :items="branks"
      :search="search"
      :pagination.sync="pagination"
      :total-items="totalNum"
      :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 :src="props.item.image" alt="加载失败"></td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="text-xs-center">
            <v-btn flat icon color="info lighten-2">
              <v-icon>edit</v-icon>
            </v-btn>
           <v-btn flat icon color="error lighten-2">
              <v-icon>delete</v-icon>
            </v-btn>
         </td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
export default {
  name: "MyBrand",
  data(){
    return{
      totalNum: 0,
      loading: false,
      pagination: {//用于控制数据表外部的分页和排序，也可以用来设置默认的排序列。  Object
        
      },
      search: '',//用于筛选结果的搜索模型  Array
      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},
      ],
      branks: []
    }
  },
  created(){
    this.totalNum=15,
    this.loading=true,
    this.search="mocar模糊查询",
    this.branks = [
      {id:1,name:"小米",image:"dad",letter:"X"},
      {id:2,name:"小米",image:"das",letter:"A"},
      {id:3,name:"小米",image:"fsdf",letter:"d"},
      {id:4,name:"小米",image:"gdfg",letter:"f"},
      {id:5,name:"小米",image:"hgf",letter:"a"},
      {id:6,name:"小米",image:"hfgh",letter:"s"},
    ],
    this.loading=false
  }
}
</script>

<style  scoped>
</style>