[JavaScript知识库]vue通用后台管理——用户页面管理功能——剩余功能2

用户页面管理功能— 搜索功能和分页功能

搜索功能的实现

关于搜索功能,是通过 name进行搜索的，所以传入一个userform
页面设计部分

  <!-- form搜索区域 -->
      <el-form :model="userform" :inline="true">
        <el-form-item>
          <el-input v-model="userform.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit" type="primary">查询</el-button>
        </el-form-item>
      </el-form>

js里面的逻辑：

 userform: {
        name: "",
      },

 // 列表的查询 通过 name 进行查询
    onSubmit() {
      // 当进行获取数据的时候，调用getList的数据进行查询
      this.getList();
    },

 // 获取列表的收据
    getList() {
      // 获取列表数据 通过调用mock 进行数据的获取
      getUser({ params: { ...this.userform, ...this.pageData } }).then(
        ({ data }) => {
          // console.log(data);
          // 将获取到的数据进行赋值
          this.tableData = data.list;
          // 将获取数据的总条数，也就是当前数据的个数 赋值给 data 里面的 total
          this.total = data.count || 0;
          // console.log(this.total);
        }
      );
    },

分页功能的实现

关于分页功能，需要使用到 element 中的Pagination 分页 组件

第一步 关于页面的设计

<div>
      <!-- 分页功能  其中 prev pager next 分别代码 上一页 当前页 和下一页 里面的 total 进行绑定data里面的数据-->
      <el-pagination layout="prev, pager, next" :total="total"> </el-pagination>
 </div>

第二步 在js代码中的设计

在data 里面进行定义一个变量 叫做 total 初始值为0

之后通过从后端获取到得到数据进行处理，里面的 count 表示当前数据的个数 进行判断 如果不存在 赋值为0，

 // 获取列表的收据
    getList() {
      // 获取列表数据 通过调用mock 进行数据的获取
      getUser().then(({ data }) => {
        // console.log(data);
        // 将获取到的数据进行赋值
        this.tableData = data.list;
        // 将获取数据的总条数，也就是当前数据的个数 赋值给 data 里面的 total
        this.total = data.count || 0;
        // console.log(this.total);
      });
    },

第三步 当点击 每一页时，进行数据的切换

对于使用的组件里面 ，包含一个事件类型， current-change currentPage 改变时会触发 当前页

通过使用事件进行触发，代码如下

   <!-- 分页功能  此时需要注意前面使用的是 @ 不是 :-->
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        @current-change="handlePage"
      >
      </el-pagination>

在js里面的逻辑

首先在 data里面定义一个对象 ，用来记录当前页和当前页显示几条数据

 // 定义分页的参数
      pageData: {
        page: 1,
        limit: 10,
      },
    };

之后就在定义的函数中进行逻辑的书写，将当前点击的页码赋值给data里面的page，然后使用 getList 重新进行页面的渲染

  // 当选择页码的回调函数 能够获取到当前选择的具体页码
    handlePage(val) {
      // console.log(val);
      // 根据当前的页码 进行数据的请求
      this.pageData.page = val;
      // 修改之后 需要在重新进行获取一遍数据
      this.getList();
    },

但是需要注意的是，因为此时进行向后端请求数据，是带有参数进行请求的，所以在 getList中要进行更改，
其中里面的{ params: this.pageData }是以对象的形式传递给后端的

 // 获取列表的收据
    getList() {
      // 获取列表数据 通过调用mock 进行数据的获取
      getUser({ params: this.pageData }).then(({ data }) => {
        // console.log(data);
        // 将获取到的数据进行赋值
        this.tableData = data.list;
        // 将获取数据的总条数，也就是当前数据的个数 赋值给 data 里面的 total
        this.total = data.count || 0;
        // console.log(this.total);
      });
    },

最后就是将mock.js文件中进行拦截的代码改为

// 整个table 列表 此时需要拦截带有参数的url，改写成正则的写法
Mock.mock(/api\/user\/getUser/,user.getUserList)