Vuetify笔记： Table

vuetify 表格渲染（表格自带分页功能）

<template>
	<v-data-table
		  v-model="selected"
          :headers="headers"
          :items="desserts"
          item-key="name"
          :items-per-page="10"
          :single-select="singleSelect"
          show-select
          :footer-props="footer_props"
          class="elevation-1"
      >
      	// 渲染action列按钮  单一列修改方式
        <template v-slot:item.action="{ item }">
          <v-icon small>mdi-file-check</v-icon>
          <v-icon small style="padding-left: 10px">delete</v-icon>
        </template>
        
        // 遍历全部表头的方式
        //<template v-for="info in headers" :slot="'item.' + info.value" slot-scope="props">
          //<div>
           // <p v-if="info.type === 'link1'"><a :href="props.item['link']" target="_blank">{{props.item[info.value]}}</a></p>
            //<p v-else>{{props.item[info.value]}}</p>
          //</div>
        //</template>
      </v-data-table>
</template>
//数据
data(){
      return{
        headers:[
			{
				text: 'Name',
          		value: 'name',
          		sortable: false //排序功能 
			},
			{
				text: 'Age',
          		value: 'age',
          		sortable: true 
			},
			{
				text: 'Actions',
          		value: 'actions',
          		sortable: false
			}
		],
        desserts:[],
        singleSelect: false,
        selected:[], //勾选的数据
        footer_props: {
        	'items-per-page-options': [5,10,15,20]
      	},
      }
    },

后端分页配置：

表格的页码和每页数量

:options.sync=“tableOptions”
tableOptions: {
page:1,
itemsPerPage:10,
}

总条数

:server-items-length=“serverItemsLength”
serverItemsLength:1000

排序

:sort-by.sync=“sortBy” //更改应该用于排序顺序的项目属性（或属性）
sortBy:[]
:sort-desc.sync=“descending” //可以修改排序方向
descending:[false]