Vuetify笔记(5):data-tables组件

    v-data-table 用于显示表格数据，功能包括排序、搜索、分页、行内编辑、头部提示以及行选择。而我们在实际应用中使用最多的就是服务端分页和排序，如果你从后台加载数据，并希望显示结果之前进行分页和排序，你可以使用 total-items 属性。定义这个属性将会禁用内置的分页和排序，并且你需要使用 pagination 属性来监听变化。使用 loading 属性来显示获取数据时的进度条。

1、v-data-table核心属性

（1）headers：定义表头的数组，数组的每个元素就是一个表头信息对象，结构：

{
  text: string, // 表头的显示文本
  value: string, // 表头对应的每行数据的key
  align: 'left' | 'center' | 'right', // 位置
  sortable: boolean, // 是否可排序
  class: string[] | string,// 样式
  width: string,// 宽度
}

（2）items：表格的数据的数组，数组的每个元素是一行数据的对象，对象的key要与表头的value一致。
（3）loading：是否显示加载数据的进度条，默认是false；
（4）total-items：分页的总条数信息，number类型，无默认值；
（5）pagination.sync：包含分页和排序信息的对象，将其与vue实例中的属性关联，表格的分页或排序按钮被触发时，会自动将最新的分页和排序信息更新。对象结构：

{
    page: 1, // 当前页
    rowsPerPage: 5, // 每页大小
    sortBy: '', // 排序字段
    descending:false, // 是否降序
}

（6）select-all ：是否显示每一行的复选框，Boolean类型，无默认值；
（7）no-data-text：当没有查询到数据时显示的提示信息，string类型，无默认值；
（8）dark：是否使用黑暗色彩主题，默认是false；
（9）expand：表格的行是否可以展开，默认是false。

（10）search：搜索过滤字段，用不到，暂时不管

2、服务端分页模板

2.1、官网服务端分页demo

官方网站上提供的一个例子代码

以上代码例子中，Vue自动遍历传递过来的items属性，并把得到的对象传递给这个段template中的props.item属性。但是需要注意的是

• 给items和totalitems赋值；
• 当pagination变化时，重新获取数据，再次给items和totalitems赋值。 

2.2、分页属性

（1）pagination.sync属性说明

首先我们发现pagination包含分页以及排序信息的对象。有下属性：

• page当前页，也就是当前第几页；
• rowsPerPage表示每页多少条记录；
• sortBy表示分页字段；
• descending：是否降序；
• totalItems表示总条数，一般是后台传递给前台。

【需要注意】我们在前台页面选择分页方式需要采用watch对pagination对象进行监控。如下面这段代码

   watch:{
      key(){
        this.loadBrands();
      },
      pagination:{
        deep: true,//深度監控
        handler(){
          this.loadBrands();
        }
      }
    },
 methods:{
      loadBrands(){
       this.$http.get("/brands/page",{ params:{
          page: this.pagination.page,//当前页
          row: this.pagination.rowsPerPage,//每页大小
          sortBy: this.pagination.sortBy, //分页字段
           desc: this.pagination.descending,//第几页
           key: this.key,//查询条件
         }
       }).then();
        }
    }

    }

以上代码发出的请求是http://api.leyou.com/api/brands/page?page=1&row=25&sortBy=id&desc=true&key=zhagnsan。

 

3、例子