iview page分页组件的集成

比眉伴天荒 2022-06-03 08:22 708阅读 0赞

iview page分页组件的集成

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

![Center][]

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

第二步：引入组件

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如下图所示：

![20171223123901510][]

第三步：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值相等从而初始化表格。

第六步：效果如下：

![20171223133439076][]

[https_www.iviewui.com_components_page]: https://www.iviewui.com/components/page
[Center]: /images/20220603/5337fd5fb3984a2f87d1f9738456bef0.png
[http_blog.csdn.net_u013144287_article_details_78659647]: http://blog.csdn.net/u013144287/article/details/78659647
[20171223123901510]: /images/20220603/62652b832f8f468c9b2c5c067344ea05.png
[20171223133439076]: /images/20220603/5dc34321bf5d485ea0e13e0ea901e15a.png