Vuetify notes: data tables component

    v-data-table is used to display table data. Its functions include sorting, searching, pagination, intra row editing, header prompt and row selection. The most commonly used in practical applications is server paging and sorting. If you load data from the background and want to page and sort before displaying the results, you can use the total items attribute. Defining this property will disable built-in paging and sorting, and you need to use the pagination property to listen for changes. Use the loading property to display the progress bar when getting data.

1. v-data-table core attributes

(1) Headers: defines an array of headers. Each element of the array is a header information object. Structure:

   
  1. {
  2. text: string, // Display text of header
  3. value: string, // The key of each row of data corresponding to the header
  4. align: 'left' | 'center' | 'right', // position
  5. sortable: boolean, // Sortable
  6. class: string[] | string, // style
  7. width: string, // width
  8. }


(2) items: an array of table data. Each element of the array is an object of a row of data. The key of the object should be consistent with the value of the header.
(3) Loading: whether to display the progress bar of loading data. The default is false;
(4) Total items: total number of paged items, number type, no default value;
(5) pagination.sync: an object containing pagination and sorting information, which is associated with the attributes in the vue instance. When the pagination or sorting button of the table is triggered, the latest pagination and sorting information will be automatically updated. Object structure:

   
  1. {
  2. page: 1, // Current page
  3. rowsPerPage: 5, // Size per page
  4. sortBy: '', // sort field
  5. descending: false, // Descending order
  6. }


(6) Select all: whether to display the check box of each row, Boolean type, no default value;
(7) No data text: prompt information displayed when no data is queried, string type, no default value;
(8) Dark: whether to use dark color theme. The default is false;
(9) expand: whether the table row can be expanded. The default value is false.

(10) Search: search the filter field. If it is not used, it will not be used for the time being

2. Server paging template

2.1. Official website server paging demo

An example code provided on the official website

   
  1. <template>
  2. <div>
  3. <v-data-table
  4. :headers= "headers"
  5. :items= "desserts"
  6. :search= "search"
  7. :pagination.sync= "pagination"
  8. :total-items= "totalDesserts"
  9. :loading= "loading"
  10. class= "elevation-1"
  11. >
  12. <template slot="items" slot-scope="props">
  13. <td>{{ props.item.name }} </td>
  14. <td class="text-xs-right">{{ props.item.calories }} </td>
  15. <td class="text-xs-right">{{ props.item.fat }} </td>
  16. <td class="text-xs-right">{{ props.item.carbs }} </td>
  17. <td class="text-xs-right">{{ props.item.protein }} </td>
  18. <td class="text-xs-right">{{ props.item.iron }} </td>
  19. </template>
  20. </v-data-table>
  21. </div>
  22. </template>

In the above code example, Vue automatically traverses the passed items attribute and passes the obtained object to the props.item attribute in this segment template. But it should be noted that

  • Assign values to items and totalitems;
  • When pagination changes, retrieve the data and assign values to items and totalitems again.  

2.2 paging properties

(1) Description of pagination.sync property

First, we find that pagination is an object that contains paging and sorting information. There are the following attributes:

  • Page the current page, that is, the current page;
  • rowsPerPage indicates the number of records per page;
  • sortBy indicates the paging field;
  • Descending: descending;
  • totalItems indicates the total number of items, which is generally passed from the background to the foreground.

[note] when we select the paging method on the foreground page, we need to use watch to monitor the pagination object. Such as the following code

   
  1. watch:{
  2. key( ){
  3. this. loadBrands();
  4. },
  5. pagination:{
  6. deep: true, //Depth monitoring
  7. handler( ){
  8. this. loadBrands();
  9. }
  10. }
  11. },
  12. methods:{
  13. loadBrands( ){
  14. this. $http. get( "/brands/page",{ params:{
  15. page: this. pagination. page, //Current page
  16. row: this. pagination. rowsPerPage, //Size per page
  17. sortBy: this. pagination. sortBy, //Paging field
  18. desc: this. pagination. descending, //What page
  19. key: this. key, //query criteria
  20. }
  21. }). then();
  22. }
  23. }
  24. }

The request from the above code is http://api.leyou.com/api/brands/page?page=1&row=25&sortBy=id&desc=true&key=zhagnsan.

 

3. Examples

   
  1. <template>
  2. <div>
  3. <v-data-table
  4. :headers= "headers"
  5. :items= "brands"
  6. :pagination.sync= "pagination"
  7. :total-items= "totalBrands"
  8. :loading= "loading"
  9. class= "elevation-1"
  10. >
  11. <template slot="items" slot-scope="props">
  12. <td class="text-xs-center">{{ props.item.id }} </td>
  13. <td class="text-xs-center">{{ props.item.name }} </td>
  14. <td class="text-xs-center"> <img :src="props.item.image" alt=""/> </td>
  15. <td class="text-xs-center">{{ props.item.letter }} </td>
  16. <td class="text-xs-center">modify/Delete </td>
  17. </template>
  18. </v-data-table>
  19. </div>
  20. </template>
  21. <script>
  22. export default {
  23. name: "MyBrand",
  24. data( ){
  25. return {
  26. totalBrands: 0, //
  27. brands: [], //An array is an array that corresponds to the item in the component
  28. loading: false,
  29. pagination: {}, //Empty object
  30. headers: [ //headers header array, which contains objects
  31. {
  32. text: 'brand id', //Display text
  33. align: 'center', //left, center and rights
  34. sortable: true, //Is it necessary to sort
  35. value: 'id' //value is the field associated with this header
  36. },
  37. { text: 'Brand name', align: 'center', value: 'name' , sortable: false },
  38. { text: 'brand Logo', align: 'center', value: 'image' , sortable: false },
  39. { text: 'Initials', align: 'center', value: 'letter' , sortable: false },
  40. { text: 'operation', align: 'center', sortable: false }
  41. ]
  42. }
  43. },
  44. created( ){
  45. this. brands=[
  46. { id: 1, name: "millet", image: "2.jpg", letter: "X"},
  47. { id: 2, name: "Huawei ", image: "", letter: "H"},
  48. { id: 1, name: "Apple", image: "", letter: "A"},
  49. { id: 1, name: "Samsung", image: "", letter: "S"}
  50. ];
  51. this. totalBrands= 15;
  52. }
  53. }
  54. </script>

 

Tags: Javascript Front-end html

Posted on Tue, 30 Nov 2021 05:51:26 -0500 by rinkhals