iview page分页组件的集成

iview page分页组件的集成

            今天给大家分享一下iview page分页组件与iview table表格的集成,主要是针对前端集成,整个前端采用vue渲染,首先我们查看一下iview page分页组件https://www.iviewui.com/components/page的介绍,分页组件的样式加起来不外乎就是以下style

所以后台提供接口需要返回数据总条数total,需要接受前台传入pageNum和pageSize两个参数，我的项目是采用vue-cli生成的项目，关于vue-cli生成项目可以参考博客http://blog.csdn.net/u013144287/article/details/78659647

第一步：html vue渲染集成所有样式，引入iview page组件,首先在main.js里面加入

import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

第二步：引入组件

<Page :total="pageTotal" :current="pageNum" :page-size="pageSize" show-elevator show-sizer show-total 
placement="top" @on-change="handlePage" @on-page-size-change='handlePageSize'></Page>

1、:total是Page属性，为总条数

2、:current是Page属性，为当前页数

3、:page-size是Page属性，为当前显示数据条数

4、show-elevat对应html 图中跳至1页

5、show-sizer对应html图中10条/页

6、show-total对用html图中共58条

api如下图所示：

第三步：data里面初始化：

 pageTotal: 0,
 pageNum: 1,
 pageSize: 10,

第四步：取到pageNum和pageSize

  handlePage(value) {
      this.pageNum = value
      this.getTeacherMessages()
    },
    handlePageSize(value) {
      this.pageSize = value
      this.getTeacherMessages()
    },

第五步：table绑定值是data1,然后根据传入的pageNum,pageSize获取数据，给出的只是一种思想，都是利用vue v-bind或v-model来绑定值

//获取教师信息列表
    getTeacherMessages() {
      var vm = this
      var url = '/v1/teachers?'
      //传入后台的pageNum和pageSize
     url = url + "pageNum=" + this.pageNum + '&pageSize=' + this.pageSize
      if (this.auditModelValue != '') {
        url = url + '&audit=' + this.auditModelValue
      }
      if (this.areaSelectValue != '') {
        url = url + '&areaClass=' + this.areaSelectValue
      }
      if (this.nameValue != '') {
        url = url + '&name=' + this.nameValue
      }

      this.$http.get(url).then(response => {
        if (response.data.code == '000000') {
          var storageteachers = response.data.data
          //绑定的iview table数据，是一个数组
         vm.data1 = storageteachers
           //绑定的总数据条数，后台接口返回
         vm.pageTotal = parseInt(response.data.message)
          for (var i = 0; i < vm.data1.length; i++) {
            vm.data1[i].sex = storageteachers[i].sex == 1 ? '男' : '女'
            if (typeof vm.data1[i].socialType != 'undefined' && vm.data1[i].socialType != null) {
              vm.data1[i].socialType = storageteachers[i].socialType == 0 ? '在校大学生' : '专职教师'
            }

            //处理上课方式
            if (typeof vm.data1[i].classType != 'undefined' && vm.data1[i].classType != null) {
              var classTypeArr = vm.data1[i].classType.split(',')
              vm.data1[i].classType = ''

              for (var j = 0; j < classTypeArr.length; j++) {
                if (classTypeArr[j] == 0) {
                  vm.data1[i].classType += '学生上门,'
                } else if (classTypeArr[j] == 1) {
                  vm.data1[i].classType += '老师上门,'
                } else if (classTypeArr[j] == 2) {
                  vm.data1[i].classType += '远程教学,'
                }
              }
              vm.data1[i].classType = vm.data1[i].classType.substr(0, vm.data1[i].classType.length - 1)
            }


            //处理家教经验
            if (typeof vm.data1[i].turorExperience != 'undefined' && vm.data1[i].turorExperience != null) {
              switch (vm.data1[i].turorExperience) {
                case 'one': vm.data1[i].turorExperience = '1年'
                  break
                case 'two': vm.data1[i].turorExperience = '2年'
                  break
                case 'three': vm.data1[i].turorExperience = '3年'
                  break
                case 'four': vm.data1[i].turorExperience = '3年以上'
                  break
              }
            }


            //处理教师星级
            if (typeof vm.data1[i].levelId != 'undefined' && vm.data1[i].levelId != null) {
              switch (vm.data1[i].levelId) {
                case '1': vm.data1[i].levelId = '实习'
                  break
                case '2': vm.data1[i].levelId = '初级'
                  break
                case '3': vm.data1[i].levelId = '中级'
                  break
                case '4': vm.data1[i].levelId = '高级'
                  break
                case '5': vm.data1[i].levelId = '特级'
                  break
              }
            }

            //处理审核状态
            if (typeof vm.data1[i].audit != 'underfined' && vm.data1[i].audit != null) {
              switch (vm.data1[i].audit) {
                case "0":
                  vm.data1[i].audit = '未审核'
                  break
                case "1":
                  vm.data1[i].audit = '审核通过'
                  break
                case "2":
                  vm.data1[i].audit = '审核未通过'
                  break
              }
            }
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },

下面还是给出iveiw table的写法吧：

1、html

<i-table highlight-row :columns="columns3" :data="data1" ref="table" :height="tableHeight"></i-table>

2、data初始化

columns3: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          width: 200,
          title: '❤姓名',
          sortable: true,
          key: 'name',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.name)
            ]);
          }
        },
        {
          sortable: true,
          width: 200,
          title: '审核状态',
          key: 'audit'
        },
        {
          width: 200,
          title: '星级',
          key: 'levelId'
        },
        {
          width: 200,
          title: '❤手机号码',
          key: 'phone'
        },
        {
          width: 200,
          title: '❤性别',
          key: 'sex'
        },
        {
          width: 200,
          title: '❤籍贯',
          key: 'nativePlace'
        },
        {
          width: 200,
          title: '❤教员类型',
          key: 'socialType'
        },
        {
          width: 200,
          title: '❤生日',
          key: 'birth'
        },
        {
          width: 200,
          title: '❤就读学校',
          key: 'school'
        },
        {
          width: 200,
          title: '❤学历',
          key: 'education'
        },
        {
          width: 200,
          title: '❤专业',
          key: 'professional'
        },
        {
          width: 200,
          title: '❤所在区域',
          key: 'areaClass'
        },
        {
          width: 200,
          title: '❤可授年级',
          ellipsis: true,
          key: 'gradle'
        },
        {
          width: 200,
          title: '❤授课时间',
          key: 'classTime'
        },
        {
          ellipsis: true,
          width: 200,
          title: '❤可授科目',
          key: 'iwiteksSubjectIds'
        },
        {
          width: 200,
          title: '❤薪资要求',
          key: 'salary'
        },
        {
          width: 200,
          ellipsis: true,
          title: '❤授课方式',
          key: 'classType'
        },
        {
          width: 200,
          title: '执教学校',
          key: 'chargSchool'
        },
        {
          width: 200,
          title: '执教等级',
          key: 'professionalLevel'
        },
        {
          width: 200,
          ellipsis: true,
          title: '❤家教经验',
          key: 'turorExperience'
        },
        {
          width: 200,
          ellipsis: true,
          title: '相关证书',
          key: 'certificate'
        },
        {
          width: 200,
          ellipsis: true,
          title: '获奖情况',
          key: 'wining'
        },
        {
          width: 200,
          ellipsis: true,
          title: '个人描述',
          key: 'personalDesc'
        },
        {
          width: 200,
          sortable: true,
          title: '创建时间',
          key: 'createAt'
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 240,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '查看详情'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '去审核'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.setLevelId(params.index)
                  }
                }
              }, '设置星级')
            ]);
          }
        }

      ],
      data1: [
      ],

data1在第五步后台返回数据赋值，data1通过数据key值与column列的key值相等从而初始化表格。

第六步：效果如下：