前言

大家好 我是前端歌谣 今天继续给大家带来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"选择想发生改变时候变化

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

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

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

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

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

代码部分

<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>