vuetify+vue实现table表格分页效果代码-html代码-BFW代码库

vuetify+vue实现table表格分页效果代码

代码语言：html

所属分类：表格

代码描述：vuetify+vue实现table表格分页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/materialdesignicons.4.0.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vuetify.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vjsf.main.css">



</head>

<body>
    <v-app id="app">
        <v-container>
 <v-simple-table>
    <template v-slot:default>
      <thead>
        <tr>
          <th class="text-left">
            Name
          </th>
          <th class="text-left">
            Calories
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="item in desserts"
          :key="item.name"
        >
          <td>{{ item.name }}</td>
          <td>{{ item.calories }}</td>
        </tr>
      </tbody>
    </template>
  </v-simple-table>
            <v-layout row class="mt-2">
               <v-pagination :length="6" v-model="page"></v-pagination>
            </v-layout>
        </v-container>
    </v-app>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></scri.........完整代码请登录后点击上方下载按钮下载查看