mock实现对表格数据的分页以及表格的增删改查功能

肚子咕咕叫
310 阅读6分钟

1.安装mock

npm install mockjs

2.mock实现表格数据的分页

image.png

文件的截图

image.png

实现页面以角色页面为例子，具体的样式需要自己实现

<template>
  <div style="height: 100%; width: 100%">
    <div style="display: flex; justify-content: space-between; height: 30px">
      <el-input
        size="mini"
        style="width: 200px"
        placeholder="请输入内容"
        v-model="searchKey"
        class="input-with-select"
      >
        <el-button size="mini" slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button size="mini" type="primary">
        <i class="el-icon-plus"></i>
        新增</el-button
      >
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" prop="id"> </el-table-column>
      <el-table-column label="角色名称" prop="role"> </el-table-column>
      <el-table-column label="启用状态" prop="status">
        <template slot-scope="scope">
          <div v-if="scope.row.status">已启用</div>
          <div v-else>未启用</div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"> </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import editDialog from "./components/edit-dialog.vue";
import { getRoleListApi } from "@/api/role-manage";
export default {
  name: "RoleManage",
  components: {
    editDialog,
  },
  data() {
    return {
      searchKey: "",
      tableData: [],
      editShow: false,
      total: 0,
      pageNum: 1,
      pageSize: 20,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let params = {
        searchKey: this.searchKey,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      getRoleListApi(params).then((res) => {
        console.log(res);
        this.tableData = res.roleData;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      console.log(`当前页: ${val}`);
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  height: calc(100% - 65px);
}
.el-pagination {
  text-align: right;
}
</style>

在mock文件夹中创建文件role-manage.js，并把文件在main.js中引入（不引入是无法调用接口）

// 引入mockjs
import Mock from 'mockjs'
// mock方法--三个参数
  // 1. 拦截请求地址
  // 2. 请求方式
  // 3. 返回数据
    // 形式：1直接返回数据  2函数返回数据
    // 直接返回数据

// 表格中初始的数据
这里为了测试分页，只修改id，其他数据重复
var roleListArr=[{
  id: "1",
  role: "系统管理员",
  des: "系统管理员拥有所有权限",
  status: true,
  createTime: "2023-11-08",
},
{
  id: "2",
  role: "普通用户",
  des: "普通用户仅可查看数据页面",
  status: true,
  createTime: "2023-11-08",
},
{
  id: "3",
  role: "系统管理员",
  des: "系统管理员拥有所有权限",
  status: true,
  createTime: "2023-11-08",
},
{
  id: "4",
  role: "普通用户",
  des: "普通用户仅可查看数据页面",
  status: true,
  createTime: "2023-11-08",
},
{
  id: "5",
  role: "系统管理员",
  des: "系统管理员拥有所有权限",
  status: true,
  createTime: "2023-11-08",
},
{
  id: "6",
  role: "普通用户",
  des: "普通用户仅可查看数据页面",
  status: true,
  createTime: "2023-11-08",
},
{
  id: "7",
  role: "系统管理员",
  des: "系统管理员拥有所有权限",
  status: true,
  createTime: "2023-11-08",
},
{
  id: "8",
  role: "普通用户",
  des: "普通用户仅可查看数据页面",
  status: true,
  createTime: "2023-11-08",
},{
  id: "9",
  role: "系统管理员",
  des: "系统管理员拥有所有权限",
  status: true,
  createTime: "2023-11-08",
},
{
  id: "10",
  role: "普通用户",
  des: "普通用户仅可查看数据页面",
  status: true,
  createTime: "2023-11-08",
},{
  id: "11",
  role: "系统管理员",
  des: "系统管理员拥有所有权限",
  status: true,
  createTime: "2023-11-08",
},
{
  id: "12",
  role: "普通用户",
  des: "普通用户仅可查看数据页面",
  status: true,
  createTime: "2023-11-08",
}];
  // 定义返回的数据
let dataRes = function(options){
  // 获取调用接口时传过来的数据
  // 传过来的数据有pageNum(第几页), pageSize（每页显示几条），searchKey（搜索关键字）
  let info = JSON.parse(options.body);
  // 搜索关键字，通过它对表格数据进行筛选
  // 示例：对角色名称进行筛选
  // 需要注意的是我们筛选数据的时候，是不能破坏原始的数据
  const searchKey = info.searchKey;
  const pageNum = info.pageNum;
  const pageSize = info.pageSize;
  let newArr = [];
  if (roleListArr.length > 0) {
    // 从第几个数据开始返回
    // 比如需要展示的是第二页的数据,那么开始的数据就是第一页的数据*每页个数
    // 那么展示第x页的数据，那么返回的开始数据就是 第x-1页*每页个数，得到前面几页共有多少条数据
    let pageStarNum = (pageNum -1) * pageSize;
    // 该页结束的个数
    let num = pageNum * pageSize;
    // 以第二页，一页10个为例（这里循环的就是11-20）
    for (let i = pageStarNum; i < num; i++) {
      // 如果没有数据了，就跳出循环不需要往返回的数据中添加了，以免报错
      if(roleListArr[i]){
        newArr.push(roleListArr[i]);
      }else{
        break;
      }
    }
  }
  let total = roleListArr.length;

  let data={
    roleData:newArr,
    total:total,
  }
  
  return {
    code: 200,
    msg:"获取数据成功",
    data:data
  }
} 
Mock.mock('/api/data/getRoleListApi','post',dataRes )

在api文件夹中创建role-manage.js，用来封装数据，也可以不封装直接调用，但是个人喜欢封装axios之后，封装接口再调用，这样出现问题会更好解决。如果没有这一步，可以直接通过axios调用接口。

// 这个request就是我封装的axios
import request from '../utils/require';

export function getRoleListApi(params) {
  return request.post("/api/data/getRoleListApi",params);
}

3.mock实现对表格数据的查询

对页面的搜索按钮添加点击事件，点击时重新获取表格数据

    <div style="display: flex; justify-content: space-between; height: 30px">
      <el-input
        size="mini"
        style="width: 200px"
        placeholder="请输入内容"
        v-model="searchKey"
        class="input-with-select"
      >
        <el-button
          size="mini"
          slot="append"
          @click="searchList"
          icon="el-icon-search"
        ></el-button>
      </el-input>
      <el-button size="mini" type="primary">
        <i class="el-icon-plus"></i>
        新增</el-button
      >
    </div>
    
    methods:{
      searchList() {
          // 这里需要注意的是，搜索的时候，需要把分页的下标至为1，
          //因为符合搜索条件的数据可能不够一页，如果少于一页的个数，
          //此时pageNum不是1时，表格不会显示数据
          this.pageNum = 1;
          this.getList();
      },
    }

我们对接口也需要进行一些修改

let dataRes = function(options){
  // 获取调用接口时传过来的数据
  // 传过来的数据有pageNum(第几页), pageSize（每页显示几条），searchKey（搜索关键字）
  let info = JSON.parse(options.body);
  // 搜索关键字，通过它对表格数据进行筛选
  // 示例：对角色名称进行筛选
  // 需要注意的是我们筛选数据的时候，是不能破坏原始的数据
  const searchKey = info.searchKey;
  const pageNum = info.pageNum;
  const pageSize = info.pageSize;
  let newArr = [];
  let total = 0;
  if (roleListArr.length > 0) {
    // 从第几个数据开始返回
    // 比如需要展示的是第二页的数据,那么开始的数据就是第一页的数据*每页个数
    // 那么展示第x页的数据，那么返回的开始数据就是 第x-1页*每页个数，得到前面几页共有多少条数据
    let pageStarNum = (pageNum -1) * pageSize;
    // 该页结束的个数
    let num = pageNum * pageSize;
    // 已是否有搜索关键字来区分
    if(searchKey == ""){
    // 以第二页，一页10个为例（这里循环的就是11-20）
      for (let i = pageStarNum; i < num; i++) {
      // 如果没有数据了，就跳出循环不需要往返回的数据中添加了，以免报错
        if(roleListArr[i]){
          newArr.push(roleListArr[i]);
        }else{
          break; 
        }
      }
      // 如果没有查询条件，那么total就是初始化数据的总条数
      total = roleListArr.length;
    }else{
      // 用来存放符合条件的数据
      let searchList = [];
      for (let i = 0; i < roleListArr.length; i++) {
        // 对角色名称进行查询
        if (searchKey && roleListArr[i].role.indexOf(searchKey)>-1) {
          console.log("查询条件："+searchKey)
          searchList.push(roleListArr[i]);
        }
      }
      // 这里判断符合条件的数组是否超过一页可以展示的条数，若超过就至展示展示的条数
      // 若没超过展示所有内容即可
      if(searchList.length>pageSize){
        for (let i = pageStarNum; i < num; i++) {
            if(searchList[i]){
              newArr.push(searchList[i]);
            }else{
              break; 
            }
          }
      }else{
        newArr = searchList;
      }
      // 如果有查询条件，那么total就是符合查询条件数据的总条数
      total = searchList.length;
    }
  }

  let data={
    roleData:newArr,
    total:total,
  }
  
  return {
    code: 200,
    msg:"获取数据成功",
    data:data
  }
} 
Mock.mock('/api/data/getRoleListApi','post',dataRes )

4.mock实现对表格数据的新增

5.mock实现对表格数据的编辑

6.mock实现对表格数据的删除

avatar
文章
阅读
粉丝