Vuetify —— table列表+ 分页

原创已于 2022-05-06 22:00:31 修改

· 1.7k 阅读

1 ·

版权

文章标签：

#vue

于 2022-05-03 12:44:51 首次发布

该博客展示了如何使用Vue.js实现数据表格的展示，包括应用、客户端IP、URL、方法、状态码、耗时和时间等信息。通过v-data-table组件进行数据渲染，并结合v-select和v-pagination组件实现每页显示条数的选择与分页功能，提供了动态加载数据及页面切换的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

 <v-data-table
  :headers="headers"
  :items="logs"
  :items-per-page="itemsPerPage"
  hide-default-footer
  class="elevation-0"
  no-data-text="暂无数据"
></v-data-table>
<div class="d-flex align-center justify-end text-center pt-2">
  <div class="d-flex">
    <span class="page_num_text">每页</span>
    <v-select
      class="search_itemsPerPage mx-1"
      v-model="itemsPerPage"
      :items="numbers"
      outlined
      @change="logsel(itemsPerPage)"
    >
      <template class="search_item" #item="{ item }">
        <p>{{ item }}</p>
      </template>
    </v-select>
    <span class="page_num_text">条记录</span>
  </div>
  <v-pagination
    class="logs_pagination"
    v-model="page"
    @input="onPageChange"
    :length="pageCount"
    total-visible="7"
    prev-icon="上一页"
    next-icon="上一页"
  ></v-pagination>
</div>


export default {
  name: "Logs",
  data() {
    return {
      headers [
			  { text: "应用", value: "host" },
			  { text: "客户端IP", value: "client_ip" },
			  { text: "URL", value: "uri" },
			  { text: "方法", value: "method" },
			  { text: "状态码", value: "status" },
			  { text: "耗时", value: "response_time" },
			  { text: "时间", value: "timestamp" }
			],
      logs: [],
      page: 1,
      pageCount: 0,
      itemsPerPage: 25,
      numbers: [10, 25, 50, 100],
    };
  },
  created() {
    this.fetchLogs(this.page, this.itemsPerPage);
  },
  methods: {
    onPageChange(page) {
      this.fetchLogs(page, this.itemsPerPage);
    },
    logsel(itemsPerPage) {
      this.fetchLogs(this.page, itemsPerPage);
    },
    fetchLogs(page_num = 1, page_size = 25) {
      return this.$http
        .get(`/api/log?page_num=${page_num}&page_size=${page_size}`)
        .delegateTo(api_request)
        .then(({ total, result }) => {
          this.pageCount = Math.ceil(total / page_size);
          this.logs = result;
        })
        .catch(({ code, message }) => {
          throw `获取数据失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
            "api." + typeof message === "string"
              ? message
              : JSON.stringify(message)
          )}`;
        })
        .delegateTo(this.$snackbar.delegateError);
    }
  },
};