Vue使用mixin混入搭配element-UI的分页el-pagination简化代码

什么是 mixin

官方：Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。

我说：就是让不同的组件共用数据与方法

这里使用的是 vue-element-admin-master 模板

创建文件 Pagination.js 我是在src创建的mixins

放入 el-pagination 需要的数据（将分页的公用代码抽取出来）

export default {
  data() {
    return {
      ipagination: {
        total: 0, // 总记录数
        currentPage: 1, // 当前页码
        layout: 'total, sizes, prev, pager, next, jumper', // 控件
        pageSize: 10, // 页容量
        pageSizes: [10, 20, 30, 50], // 页容量规格
      },
      tableList: [], // 表格数据 分页基本都是搭配 el-table 使用
      loading: false, // 是否显示loading信息 
      queryParam:{}, // 查询条件封装对象
    }
  },

如何使用抽离出来的数据

1. 在我们需要的 ***.vue 文件 导入

2. 使用 mixins 函数

3. 在 ***.vue 里面使用 el-pagination

4. 特别注意： 无需在 ***.vue 再次定义 el-pagination 所需要的参数
5. mixin的特点 ：
   5.1 数据合并

本组件的数据和混入的数据冲突会使用本主键的数据，没有冲突则合并 例如：

公用功能

el-pagination 翻页功能也能写入 Pagination.js

Pagination.js

分页功能 基本上就完成了

附属内容

咱们的分页基本上都是和 el-table 一起使用 我们称他为 分页条件查询

组件的 el-table 绑定的 data数组和 条件查询的 对象 queryParam我们可以使用在 Pagination.js中定义出来

Pagination.js

我们写一个 查询数据的基本方法 getData() 和 获取条件的方法 getQueryParams()

el- table 还有操作功能 比如 删除方法removeDataById(id)和 查询条件的 重置方法 queryReset()我们也可以在 Pagination.js 一起定义

Pagination.js

这些方法在组件里面使用就行

注意：如果 需要特别定制 这些方法 在 组件里面写一个 getData()就能覆盖 Pagination.js 的 getData()

欸 有人会问我的 getAction(this.url.list, params)在哪里来的呢

在 src/api 定义一个 manage.js文件 在Pagination.js头部引用了我写的manage.js

最后附上完整代码

manage.js如下

import axios from '@/utils/request'

// post 
export function postAction(url, data) {
  return axios({
    url,
    method: 'post',
    data
  })
}

//get
export function getAction(url, params) {
  return axios({
    url,
    method: 'get',
    params
  })
}

//deleteAction
export function deleteAction(url, params) {
  return axios({
    url,
    method: 'delete',
    params
  })
}

Pagination.js

import {getAction} from '@/api/manage'

// 将分页的公用代码抽取出来 规定查询数据的方法名为 getData 

export default {
  data() {
    return {
      ipagination: {
        total: 0, // 总记录数
        currentPage: 1, // 当前页码
        layout: 'total, sizes, prev, pager, next, jumper', // 控件
        pageSize: 10, // 页容量
        pageSizes: [10, 20, 30, 50], // 页容量规格
      },
      tableList: [], // 表格数据
      loading: false, // 是否显示loading信息
      queryParam:{}, // 条件封装对象
    }
  },
  methods: {
    // 数据查询方法
    getData(arg) {
      if (this.url.list == null){
        this.$message.error("请设置url.list属性 !")
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg == 1){
        this.ipagination.currentPage = 1;
      }
      let params = this.getQueryParams(); // 获取查询条件
      this.loading = true;
      getAction(this.url.list, params).then((res) =>{
        if(res.success){
          this.$message.info(res.message)
          this.tableList = res.data.records;
          this.ipagination.total = res.data.total;
        }
        this.loading = false;
      })

    },

    // 获取查询条件
    getQueryParams(){
      let params = Object.assign({}, this.queryParam);
      params.currentPage = this.ipagination.currentPage;
      params.pageSize = this.ipagination.pageSize;
      return params;
    },

    // 当前页容量发生改变
    handleSizeChange(pageSize) {
      this.ipagination.currentPage = 1
      this.ipagination.pageSize = pageSize
      this.getData()
    },

    // 当前页码发生改变
    handleCurrentChange(currentPage) {  
      this.ipagination.currentPage = currentPage
      this.getData()
    },

   // 重置查询
   queryReset(){
    this.queryParam = {};
    this.getData(1);
   },


    // 删除
    removeDataById(id) {
    // 省略
    }
  }
}

组件 ***.vue

<template>

  <el-container>
    <el-header>
      <div class="app-container">讲师列表</div>
    </el-header>

    <el-main>
      <el-row :gutter="20">
        
        <el-col :span="24">
          <!--查询表单-->
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="queryParam.name" placeholder="讲师名" />
            </el-form-item>

            <el-form-item>
              <el-select v-model="queryParam.level" clearable placeholder="讲师头衔">
                <el-option :value="1" label="高级讲师" />
                <el-option :value="2" label="首席讲师" />
              </el-select>
            </el-form-item>

            <el-form-item label="添加时间">
              <el-date-picker v-model="queryParam.begin" type="datetime" placeholder="选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" />
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="queryParam.end" type="datetime" placeholder="选择截止时间"
                value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" />
            </el-form-item>

            <el-button type="primary" icon="el-icon-search" @click="getData()">查询</el-button>
            <el-button type="default" @click="queryReset()">重置</el-button>
          </el-form>
        </el-col>
        <el-col>
          <!-- 宽度自适应fit -->
          <el-table v-loading="loading" element-loading-text="数据加载中" :data="tableList" style="width: 100%" border fit
            highlight-current-row>
            <el-table-column label="序号">
              <template slot-scope="scope">
                {{ ( ipagination.currentPage - 1 ) * ipagination.pageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" />
            <el-table-column label="头衔">
              <template slot-scope="scope">
                {{ scope.row.level == 1 ? '高级讲师' : '首席讲师' }}
              </template>
            </el-table-column>
            <el-table-column prop="intro" label="资历" />
            <el-table-column prop="gmtCreate" label="新增时间" />
            <el-table-column prop="sort" label="排序" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-col :span="10">
                  <router-link :to="'/edu/teacher/edit/'+scope.row.id">
                    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                  </router-link>
                </el-col>
                <el-col :span="10">
                  <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除
                  </el-button>
                </el-col>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

    </el-main>
    <el-footer>
      <el-row :gutter="20">
        <el-col :span="12" :offset="6">
          <el-pagination :total="ipagination.total" background :layout="ipagination.layout"
            :current-page="ipagination.currentPage" :page-sizes="ipagination.pageSizes"
            :page-size="ipagination.pageSize" @current-change="handleCurrentChange" @size-change="handleSizeChange">
          </el-pagination>
        </el-col>
      </el-row>
    </el-footer>

  </el-container>

</template>

<script>
  import pagination from '@/mixins/Pagination';

  export default {
    // 写核心代码
    name: 'eduTeacherList',
    mixins: [pagination],
    components: {},
    data() { // 定义变量和初始值
      return {
        queryParam: {}, // 条件封装对象
        url: {
          list: `/eduservice/teacher/pageTeacherCondition`
        }

      }
    },
    created() { // 页面渲染之前执行， 一般执行methods定义的方法
      this.getData();
    },
    mounted() { // 页面渲染之后执行

    },
    methods: {

    },

  }

</script>

再给一个java api接口

   @ApiOperation(value = "条件分页查询讲师Get", notes = "条件分页查询讲师Get")
   @GetMapping("pageTeacherCondition")
   public Result<IPage<EduTeacher>> pageTeacherCondition(
            @RequestParam(name = "currentPage", defaultValue = "1") Integer currentPage,
            @RequestParam(name = "pageSize", defaultValue = "10") Integer pageSize,
            TeacherQuery teacherQuery) {

        Page<EduTeacher> page = new Page<>(currentPage, pageSize);
        QueryWrapper<EduTeacher> wrapper = new QueryWrapper<>();

        wrapper.lambda()
                .like(StringUtils.isNotEmpty(teacherQuery.getName()), EduTeacher::getName, teacherQuery.getName())
                .eq(ObjectUtil.isNotEmpty(teacherQuery.getLevel()), EduTeacher::getLevel, teacherQuery.getLevel())
                .ge(StringUtils.isNotEmpty(teacherQuery.getBegin()), EduTeacher::getGmtCreate, teacherQuery.getBegin())
                .le(StringUtils.isNotEmpty(teacherQuery.getEnd()), EduTeacher::getGmtCreate, teacherQuery.getEnd());

        IPage<EduTeacher> eduTeacherIPage = eduTeacherService.page(page, wrapper);
        return Result.ok("查询成功",eduTeacherIPage);
    }