vue element 分页

 

<template>

  <!-- 客户查询 -->

  <div style="margin-left:20px">

    <!-- 表单 机构用户列表 -->

    <h3>机构客户列表</h3>

    <el-table :data="orgUserData" border style="width: 100%">

      <el-table-column prop="userName" label="患者" width="100" align="center"></el-table-column>

      <el-table-column prop="sex" label="性别" width="80" align="center"></el-table-column>

      <el-table-column prop="companyName" label="所属机构" width="190" align="center"></el-table-column>

      <el-table-column fixed prop="cardNum" label="保单号" width="130" align="center"></el-table-column>

      <el-table-column prop="paper" label="证件号码" width="150" align="center"></el-table-column>

      <el-table-column prop="phone" label="手机号码" width="150" align="center"></el-table-column>

      <el-table-column prop="status" label="保单状态" width="110" align="center"></el-table-column>

      <el-table-column fixed="right" label="操作" align="center">

        <template slot-scope="scope">

          <el-button @click="handleClick(scope.row)" type="text" size="small">创建工单</el-button>

        </template>

      </el-table-column>

    </el-table>

    <el-pagination

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page.sync="currentPage"

      :page-size="pageParams.size"

      layout="total, prev, pager, next"

      :total="pageParams.totalCount"

    ></el-pagination>

  </div>

</template>

<script>

export default {

  name: "searchorguser",

  props: ["searchForm"],

  data() {

    return {

      orgUserData: [], //机构用户列表

      pageParams: [{ size: 20 }, { totalCount: 100 }, { totalPage: 1 }],

      currentPage: 1

    };

  },

  mounted() {

    //获取orgUserData数据

    //获取userListData数据

    //获取workListData数据

    this.getorgUserData();

  },

  methods: {

    search() {

      this.getorgUserData();

    },

    setPage(val) {

      this.pageParams.totalCount = val.totalCount;

      this.pageParams.totalPage = val.totalPage;

    },

    handleSizeChange(val) {},

    handleCurrentChange(val) {

      this.currentPage = val;

    },

    //获取orgUserData数据

    getorgUserData() {

      var orgthat = this;

      let params = orgthat.searchForm;

      console.log("orgthat.searchForm",orgthat.searchForm)

      params.page = orgthat.currentPage - 1;

      params.size = 20;

      orgthat.axios

        .post("/work/find/orgUserList", params)

        .then(res => {

          if (res.data.code == 200) {

            if (!res.data) return;

            orgthat.orgUserData = res.data.data.list;

            orgthat.setPage(res.data.data);

          }

        })

        .catch(err => {

          orgthat.$message(err.message);

        });

    }

  },

  watch: {

    currentPage() {

      this.search();

    }

  },

  components: {

  }

};

</script>

<style lang="less">

.el-row {

  margin-bottom: 20px;

  &:last-child {

    margin-bottom: 0;

  }

}

.dis_flex {

  display: flex;

  font-display: row;

  align-items: center;

}

</style>