前端歌谣-第伍拾柒课-avue-crud的使用案例表格

前端歌谣

于 2023-12-14 08:43:21 发布

阅读量485

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/qq_41632427/article/details/134977565

版权

歌谣-最强学习合集专栏收录该内容

114 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在Avue前端框架中使用分页功能，包括`page.sync`处理、数据管理（如`tableData`）、加载状态控制以及响应式事件如`@current-change`和`@size-change`等。同时展示了如何在`avue-crud`组件中应用这些特性。

摘要由CSDN通过智能技术生成

前言

大家好我是前端歌谣今天继续给大家带来avue的讲解

:page.sync="page"分页处理

page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },

:data="tableData"表单数据

 tableData: [],

:table-loading="listLoading"是否加载状态

 listLoading: true,

@current-change=“currentChange” 分页变化

 currentChange(val) {
      this.page.page = val;
      this.page.currentPage = val;
      thi

@size-change="sizeChange"条数改变

 sizeChange(val) {
      this.page.limit = val;
      this.page.pageSize = val;
      this.getList();
    },

@selection-change="selectionChange"选择想发生改变时候变化

在这里插入图片描述

@search-change=“searchChange” 搜索的时候发生变化

在这里插入图片描述

@filter-change=“filterChange” 表格筛选条件发生变化时候

在这里插入图片描述

代码部分

   <avue-crud
      class="avue-affixed avue-new-table"
      ref="crud"
      :page.sync="page"
      :data="tableData"
      :option="tableOption"
      :table-loading="listLoading"
      @current-change="currentChange"
      @size-change="sizeChange"
      @selection-change="selectionChange"
      @search-change="searchChange"
      @filter-change="filterChange"
    >
    </avue-crud>