写列表

data里面定义

 	  tableloading: true,//加载
 	  pageDis: true, //分页显示
      loading: false, // 页面加载……
      tableShow: true, //列表信息显隐
      esultShow: false, // 数据搜索结果为空的样式显示
      ResultShow: false, // 控制搜索结果的显示
      EmptysShow: false, //空数据样式
      currentPage: 1, //当前第几页
      total: 0, //一共多少条数据
      perPage: 10, //每页多少条数据
      tableData: [], //列表数据

请求接口

    if (response.data.code == 1) {
            var conData = response.data.data; //获取整体数据
            this.tableData = conData.data; //获取列表数据
            this.total = conData.total; //总条数
            this.currentPage = conData.current_page; //当前页
            this.pageDis = this.total > 10 ? false : true; //判断分页的显隐
            //条数判断数据为空，10条
            if (this.total == 0 && !this.input) {
              this.tableShow = false;
              this.ResultShow = false;
              this.esultShow = false;
              this.EmptysShow = true;
            } else if (this.total == 0 && this.input) {
              this.tableShow = false;
              this.ResultShow = true;
              this.esultShow = true;
              this.EmptysShow = false;
            } else if (this.total != 0 && !this.input) {
              this.tableShow = true;
              this.ResultShow = false;
              this.esultShow = false;
              this.EmptysShow = false;
            } else if (this.total != 0 && this.input) {
              this.tableShow = true;
              this.ResultShow = true;
              this.esultShow = false;
              this.EmptysShow = false;
            }
            this.tableloading = false;
          } else {
            this.$message.error(res.data.msg);
          }

分页

  // 切换总条数
    handleSizeChange(val) {
      this.currentPage = 1;
      this.perPage = val;
      this.getData();
    },
    // 切换分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    }
      //搜索方法
    search() {
      if (this.input.length > 0) {
        this.getData();
      }
    },
    //搜索点击清空刷新页面
    qingkong() {
      this.currentPage = 1;
      this.ResultShow = false;
      this.getData();
    },

组件

 <!-- 搜索结果展示 -->
      <div class="searchResult" v-show="ResultShow">
        根据“
        <span class="blue">{{input}}</span>”共找到
        <span class="red">{{total}}</span>条信息
      </div>
 <!-- 搜索结果展示 -->

列表

v-show="tableShow"

搜索为空和空页面

<Result v-show="esultShow"></Result>
<Emptys v-show="EmptysShow"></Emptys>

分页

 <!-- 分页 -->
      <div class="page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="perPage"
          :hidden="pageDis"
          layout="total, sizes, ->,prev, pager, next, jumper"
          :total="total"
          popper-class="page-select"
        ></el-pagination>
      </div>
      <!-- 分页 -->