antdvue表格加分页

<template>
  <div class="page">
    <div
      v-if="hasPermissions == true"
      style="width:100%;height:calc(100% - 50px)"
    >
      <div class="interface-head">
        人工质检
      </div>
      <div class="page-box">
        <div
          class="clear search-condition-box"
          style="margin-left:20px;margin-top:30px;"
        >
          <div
            class="search-condition-box-item"
            style="width: 70px;line-height:30px;"
          >
            注册年限：
          </div>
          <div class="search-condition-box-item" style="width: 170px">
            <a-select
              v-model="searchList.year"
              style="width: 130px;float:left;display: inline-block;margin-left: -10px;"
              allowClear
              placeholder="选择年限"
            >
              <a-select-option
                v-for="(item, index) in yearList"
                :key="index"
                :value="item.productkey"
                :title="item.productName"
                >{{ item.productName }}
              </a-select-option>
            </a-select>
          </div>

          <div
            class="search-condition-box-item"
            style="width: 100px;line-height:30px;"
          >
            行业识别分类：
          </div>
          <div class="search-condition-box-item" style="width: 170px">
            <a-select
              v-model="searchList.year"
              style="width: 130px;float:left;display: inline-block;margin-left: -10px;"
              allowClear
              placeholder="选择年限"
            >
              <a-select-option
                v-for="(item, index) in yearList"
                :key="index"
                :value="item.productkey"
                :title="item.productName"
                >{{ item.productName }}
              </a-select-option>
            </a-select>
          </div>
          <div
            class="search-condition-box-item"
            style="width: 100px;line-height:30px;"
          >
            坐席开户数量：
          </div>
          <div class="search-condition-box-item" style="width: 170px">
            <a-select
              v-model="searchList.year"
              style="width: 130px;float:left;display: inline-block;margin-left: -10px;"
              allowClear
              placeholder="选择年限"
            >
              <a-select-option
                v-for="(item, index) in yearList"
                :key="index"
                :value="item.productkey"
                :title="item.productName"
                >{{ item.productName }}
              </a-select-option>
            </a-select>
          </div>
        </div>

        <div
          class="clear search-condition-box"
          style="margin-left:20px;margin-top:10px;"
        >
          <div
            class="search-condition-box-item"
            style="width: 70px;line-height:30px;"
          >
            是否测试：
          </div>
          <div class="search-condition-box-item" style="width: 170px">
            <a-select
              v-model="searchList.year"
              style="width: 130px;float:left;display: inline-block;margin-left: -10px;"
              allowClear
              placeholder="选择年限"
            >
              <a-select-option
                v-for="(item, index) in yearList"
                :key="index"
                :value="item.productkey"
                :title="item.productName"
                >{{ item.productName }}
              </a-select-option>
            </a-select>
          </div>

          <div
            class="search-condition-box-item"
            style="width: 100px;line-height:30px;"
          >
            有无对话：
          </div>
          <div class="search-condition-box-item" style="width: 170px">
            <a-select
              v-model="searchList.year"
              style="width: 130px;float:left;display: inline-block;margin-left: -10px;"
              allowClear
              placeholder="选择年限"
            >
              <a-select-option
                v-for="(item, index) in yearList"
                :key="index"
                :value="item.productkey"
                :title="item.productName"
                >{{ item.productName }}
              </a-select-option>
            </a-select>
          </div>

          <div
            class="search-condition-box-item"
            style="width: 100px;line-height:30px;"
          >
            导入数量：
          </div>
          <div class="search-condition-box-item" style="width: 140px">
            <a-select
              v-model="searchList.year"
              style="width: 130px;float:left;display: inline-block;margin-left: -10px;"
              allowClear
              placeholder="选择年限"
            >
              <a-select-option
                v-for="(item, index) in yearList"
                :key="index"
                :value="item.productkey"
                :title="item.productName"
                >{{ item.productName }}
              </a-select-option>
            </a-select>
          </div>
          <div class="search-condition-box-item" style="width: 80px">
            <a-button type="primary">
              导入
            </a-button>
          </div>
          <div
            class="search-condition-box-item"
            style="width: 140px;margin-top:10px;"
          >
            <a style="color:#218BFC">重置导入条件</a>
          </div>
        </div>

        <!-- 列表展示 -->

        <div class="form-box" style="height:calc(100vh - 300px)">
          <a-spin :spinning="table_spinning" tip="数据加载中...">
            <a-table
              rowKey="num"
              :pagination="pagination"
              :columns="columns"
              :locale="locale"
              :dataSource="data"
              :scroll="{ x: gettablewidth(), y: gettableheight() }"
            >
              <span slot="exit" slot-scope="index, text">
                <a @click="tozhi(text.id)">质检</a>
              </span>
            </a-table>
          </a-spin>
        </div>
      </div>
    </div>
    <div v-else class="no-permission" style="height:calc(100% - 50px)">
      <span>无权限，请联系管理员</span>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      table_spinning: false,
      hasPermissions: true,
      searchList: {
        year: ""
      },
      yearList: [
        {
          productkey: 1,
          productName: "一年以下"
        },
        {
          productkey: 2,
          productName: "一到三年"
        },
        {
          productkey: 3,
          productName: "三年以上"
        }
      ],
      data: [
        {
          id: 1,
          num: 1,
          companyName: "浙江快服",
          account: "愿得一心人",
          companyWeb: "互联网",
          registerTime: "2002-10-05"
        }
      ],
      locale: {},
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          key: "num",
          width: 50
        },
        {
          title: "公司名称",
          dataIndex: "companyName",
          key: "companyName",
          width: 150
        },
        {
          title: "账号类型",
          dataIndex: "account",
          key: "account",
          width: 150
        },
        {
          title: "行业类型",
          dataIndex: "companyWeb",
          key: "companyWeb",
          width: 150
        },
        {
          title: "注册时间",
          dataIndex: "registerTime",
          key: "registerTime",
          width: 150
        },
        {
          title: "操作",
          dataIndex: "exit",
          key: "exit",
          width: 150,
          scopedSlots: { customRender: "exit" }
        }
      ],
      //分页
      pagination: {
        current: 1,
        pageSize: 20,
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 20, // 默认当前页显示数据的大小
        showSizeChanger: true,
        total: "",
        // showQuickJumper: true,
        pageSizeOptions: ["20", "40", "100"],
        showTotal: total => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          this.searchList.pageNum = current;
          this.searchList.pageSize = pageSize;
          var params = JSON.parse(JSON.stringify(this.searchList));
          params.pageNum = 1;
          params.pageSize = pageSize;
          //   this.paramsCheck(params);
          //   this.regUserList(params);
          // this.getList()  //显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.pagination.current = current;
          this.pagination.pageSize = size;
          this.searchList.pageNum = current;
          this.searchList.pageSize = size;
          var params = JSON.parse(JSON.stringify(this.searchList));
          params.pageNum = current;
          params.pageSize = size;
          //   this.paramsCheck(params);
          //   this.regUserList(params);
          // this.getList()
        } // 点击页码事件
      }
    };
  },
  methods: {
    // 表格宽度
    gettablewidth() {
      let w = 0;
      for (let i of this.columns) {
        w = w + i.width;
      }
      return w;
    },
    // 表格高度
    gettableheight() {
      let height =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return height - 250;
    },
    //去质检结果页面
    tozhi(id) {
      this.$router.push({
        name: "Inspectionresults",
        params: {
          id: id
        }
      });
    }
  },
  mounted() {
    document.title = "人工质检";
  }
};
</script>

<style scoped lang="scss"></style>