记录iview-admin编写table的分页显示时分页条数不能显示的问题

最新推荐文章于 2023-10-24 18:02:02 发布

ahja

最新推荐文章于 2023-10-24 18:02:02 发布

阅读量1.5k

点赞数 3

分类专栏： |---Web前端文章标签： iview iview-admin

本文链接：https://blog.csdn.net/qq_29001539/article/details/103836028

版权

|---Web前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

发现问题

使用iview-admin进行编码过的效果图：

在这里插入图片描述

这个页面布局效果还算可以吧，但是仔细观察会发现分页那块有点小问题
大家应该看到了问题吧，分页的数目并没有显示出来，这是怎么回事呢？而且还有一个很奇怪的问题

在这里插入图片描述
问题：
f12的开发者工具窗口的大小会控制分页的数目是否显示，这就有点好玩了

那我们看下具体的代码是怎么编写的吧

<template>
  <div>
    <div class="search-con search-con-top">
      <Select class="search-col">
        <Option v-for="item in tabCols" v-if="item.key !== 'index' && item.key !== 'action'" :value="item.key" :key="`search-${item.key}`">{{ item.title }}</Option>
      </Select>
      <Input clearable placeholder="输入关键字查询" class="search-input" />
      <Button type="primary" class="search-btn" @click="modal1=true"><Icon type="search" />查询</Button>
    </div>
    <Table ref="objTabs" :columns="tabCols" :data="insideTableData" :stripe="showStripe" :border="showBorder" :show-header="showHeader" :disabled-hover="disabledHover" :highlight-row="highlightRow" :loading="isLoading">
      <template slot="header">
        <Button @click="addModal=true" type="primary" icon="md-add" style="margin-right: 4px">新增</Button>
        <Button @click="handleExport" type="primary" icon="md-download" style="margin-right: 4px">导出</Button>
      </template>
      <template slot="footer">
        <Page :current="currentNo" :total="totalCount" :page-size="pageSize" :page-size-opts="pageSizeOpts" :show-total="showTotal" show-sizer @on-change="changePage"></Page>
      </template>
      <template slot="loading">
        <span>数据加载过程中，请稍等！！！</span>
      </template>
    </Table>
    <Modal v-model="addModal" :closable="false" :mask-closable="false">
      <Form ref="objFrm" :model="objFrm" :label-width="80" label-position="right">
        <FormItem label="厂家简称" prop="shortName">
          <Input v-model="objFrm.shortName" placeholder="请输入企业简称"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'factory_page',
  components: {

  },
  data() {
    return {
      insideTableData: [],
       objFrm: {
           shortName: ''
       },
       addModal: false,
       // 是否显示间隔斑马纹
       showStripe: false,
       // 是否显示纵向边框
       showBorder: false,
       // 是否显示表头
       showHeader: true,
       // 是否显示索引
       showIndex: true,
       // 是否显示选择框
       showCheckbox: false,
       // 禁用鼠标悬停时的高亮
       disabledHover: true,
       // 是否支持高亮选中的行，即单选
       highlightRow: true,
       // 表格是否加载中
       isLoading: false,
       // 当前的页码
       currentNo: 1,
       // 总共的数据条数
       totalCount: 500,
       // 每页可以显示多少条
       pageSize: 100,
       // 每页切换的配置
       pageSizeOpts: ['10', '20', '50', '100'],
       // 显示总条数
       showTotal: true
    }
  },
  computed: {
      tabCols() {
          let columns = []
          if (this.showCheckbox) {
            columns.push({
              type: 'selection',
              width: 50,
              align: 'center'
            })
          }
          if (this.showIndex) {
            columns.push({
              type: 'index',
              width: 50,
              align: 'center'
            })
          }
          columns.push({
            key: 'short_name',
            title: '厂商简称'
          })
          columns.push({
            key: 'full_name',
            title: '厂商全称'
          })
          columns.push({
            key: 'create_time',
            title: '创建时间'
          })
          columns.push({
            key: 'id',
            title: '创建时间'
          })
          columns.push({
            key: 'action',
            title: '操作',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                    props: { size: 'small', icon: 'md-eye', type: 'default' },
                    on: { click: () => { this.show(params.index) } }
                }),
                h('Button', {
                    props: { size: 'small', icon: 'md-create', type: 'info' },
                    style: { marginLeft: '6px' },
                    on: { click: () => { this.modif(params.index) } }
                }),
                h('Button', {
                    props: { size: 'small', icon: 'md-trash', type: 'error' },
                    style: { marginLeft: '6px' },
                    on: { click: () => { this.delete(params.index) } }
                })
              ])
            }
          })
          return columns
      }
  },
  methods: {
      handleSubmit(name) { // 添加表单内容
          // todo：表单内容提交
      },
      handleReset(name) { // 重置表单内容
          this.$refs[name].resetFields()
      },
      handleExport() { // 导出表格数据
          this.$refs.objTabs.exportCsv({
              filename: `factory-${(new Date()).valueOf()}.csv`
          })
      },
      show(index) {
          axios.get('http://localhost:8085/getFactory/', {
              params: {
                  ID: this.insideTableData[index].id
              }
          }).then((resp) => {
              console.log(resp.data['data'])
              // this.insideTableData = resp.data.data
          }).catch((error) => {
              console.log(error)
          })
          alert(this.insideTableData[index].id)
          this.$Modal.info({
              title: '查看',
              content: `Name:${this.insideTableData[index].full_name}`
          })
      },
      modif(index) {
          this.$Modal.info({
              title: '编辑',
              content: `Name:${this.insideTableData[index].fullName}`
          })
      },
      delete(index) {
          this.$Modal.info({
              title: '删除',
              content: `Name:${this.insideTableData[index].fullName}`
          })
      },
      changePage() {
          // this.insideTableData =
      }
  },
  created() {
    // axios.baseUrl = ''
    axios.get('http://localhost:8085/getFactories').then(resp => {
      console.log(resp.data['data'])
      this.insideTableData = resp.data.data
    }).catch((error) => {
      this.$Message.error({
          title: '错误信息',
          content: `数据加载异常`
      })
      console.log(error)
    })
  }
}
</script>
<style lang="less" scoped>
.search-con {
  padding: 10px 0;

  .search {
    &-col {
      display: inline-block;
      width: 200px;
    }

    &-input {
      display: inline-block;
      width: 200px;
      margin-left: 2px;
    }

    &-btn {
      margin-left: 2px;
    }
  }
}
</style>