vue elementTable结合minxin分装的带分页查询的table

1创建table.vue

<template>
    <div>
        <el-form
            :inline="true"
            :model="search"
            ref="search"
        >
        <el-form-item prop="name" label="姓名">
        <el-input
            v-model.trim="search.name"
            @keyup.enter.native="dataSearch"
            clearable
            placeholder="姓名"
        ></el-input>
        </el-form-item>

        <el-form-item>
                <el-button type="primary" @click="dataSearch">查询</el-button>
                <el-button @click="restSearch('search')">重置</el-button>
              </el-form-item>
      </el-form>
        <el-table :data="listData" border>
            <el-table-column prop="username" label="帐号"> </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="phone" label="手机号码"> </el-table-column>
            <el-table-column prop="roleDescribe" label="角色"> </el-table-column>
            <el-table-column prop="departmentDescribe" label="部门">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"> </el-table-column>
            <el-table-column prop="creator" label="创建人"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="250">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(0, scope.row)"
                  type="text"
                  size="small"
                >
                  查看</el-button
                >
                <el-button
                  @click="handleClick(1, scope.row)"
                  type="text"
                  size="small"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="page-area">
            <el-pagination
              @size-change="pageSizeChange"
              @current-change="pageChange"
              :current-page="pageModel.current"
              :page-sizes="pageModel.pageSizeOpts"
              :page-size="pageModel.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageModel.totalPage"
            >
            </el-pagination>
          </div>   
    </div>
</template>
<script>
    import list from "@/mixins/list";
    import {
    getManageList,
    } from "/api/自己的接口Promise的那种"; //遮百你需要自己更具实际请款作出修改

    // 例如
    //  export const getManageList = data => {
    //   return axios.request({
    //     url: "/webUser/getManageList",
    //     method: "post",
    //     data: data
    //   });
    // };

    export default {
        mixins: [list],
        data(){
            return{
               search:{ //这边添加table的各种的输入条件
                    name:"", //更具name搜索表单
               } 
            }
        },
        methods:{
            handleClick(){
                //更具scoped设置按钮操作
            },
            async getListData() {
                let query = this.getQuery(this.search);//合并查询参数
                let { data } = await getManageList(query);
                this.pageModel.totalPage = data.total; //总页数
                this.listData = data.records; //列表页
             },
             dataSearch() { //搜索按钮
                this.pageModel.current = 0;
                this.getListData();
            },
        }
    }

</script>

2创建minxin文件夹,并且创建list.js,用作table.vue的minixn 

import { pickBy as _pickBy, isNil as _isNil } from "lodash";

export default {
  data() {
    return {
      pageModel: {
        pageSizeOpts: [10, 20, 30, 50],
        totalPage: 1,
        current: 1,
        pageSize: 10
      },
      listData: [], // 列表数据
      listLoading: false //加载
    };
  },
  watch: {},
  methods: {
    /**
     * 重置搜索域
     * @param {string} formName 组件实例
     */
    async restSearch(formName) {
      await this.resetSearchForm(formName);
      this.getListData();
    },
    resetSearchForm(formName) {
      return new Promise(resolve => {
        this.$nextTick(() => {
          this.dateRange && (this.dateRange = []);
          this.$refs.areaFormItem && this.$refs.areaFormItem.resetFormItem();
          this.$refs[formName].resetFields();
          resolve();
        });
      });
    },
    /**
     * 每页显示条数变化事件处理
     * @param {int} size 每页显示条数
     */
    pageSizeChange(size) {
      this.pageModel.pageSize = size;
      this.getListData();
    },
    /**
     * 页码变化事件处理
     * @param {int} pageNo 页码
     */
    pageChange(pageNo) {
      this.pageModel.current = pageNo;
      this.getListData();
    },
    /**
     * 获取查询参数，包含分页信息 page - 当前页码和 limit - 每页显示条数
     * @param {object} more 增加的参数
     * @param {boolean} clean 是否移除空值参数，默认为 true 移除
     */
    getQuery(more, clean = true) {
      let params = Object.assign(
        {},
        {
          current: this.pageModel.current,
          size: this.pageModel.pageSize
        },
        more
      );
      if (clean) {
        params = _pickBy(params, value => value !== "" && !_isNil(value));
      }
      return params;
    }
  }
};