// 显示详情框 showDesc (index) { let item = this.searchResults[index] this.jobDesc = [ { title: '标题', value: item.posname }, { title: '公司', value: item.company }, { title: '月薪', value: item.money }, { title: '地点', value: item.area }, { title: '发布时间', value: item.pubdate }, { title: '最低学历', value: item.edu }, { title: '工作经验', value: item.exp }, { title: '详情', value: item.desc }, { title: '福利', value: item.welfare }, { title: '职位类别', value: item.type }, { title: '招聘人数', value: item.count } ] this.showMsg = true }, // 关闭详情框 hideJobDesc () { this.showMsg = false }
// 子组件 DescMsg <template> <div v-if="showMsg"> <div @click="hideShade"></div> <div> <h4>详情介绍</h4> <table> <tbody> <tr v-for="item in jobDesc" :key="item.id"> <td>{{ item.title }}</td> <td>{{ item.value }}</td> </tr> </tbody> </table> <div> <button type="button" @click="fllow">关注</button> </div> </div> </div> </template> <script> export default { data () { return { } }, props: { jobDesc: { type: Array, default: [] }, showMsg: { type: Boolean, default: false } }, methods: { hideShade () { this.$emit('hideMsg') }, fllow () { alert('1') } } } </script>
P4 页号
页号
说明： 根据查询得到的总页数 count，规定一次最多显示10个页号。
思路： 通过v-for渲染页号，即v-for="(item, index) of pageList" ，并为每个li绑定Class 即 :class="{active: item.active} 。当页数大于10时，点击大于6的第n个页号时，页数整体向右移动1，否则整体向左移动1。为点击某一页数后item.active = true ，该页数添加样式.active。
html
<!-- 底部页号栏 --> <div> <nav aria-label="Page navigation"> <ul> <li :class="{disabled: minPage}"> <a aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li v-for="(item, index) of pageList" :class="{active: item.active}"> <a @click="onSubmit(index)">{{ item.value }}</a> </li> <li :class="{disabled: maxPage}"> <a aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div>
js
export default { data () { return { page: { selected: 0, // 选中页数 count: 0, // 总页数 size: 10 // 最大显示页数 }, pageList: [ {active: false, value: 1} // 默认包含页数1 ] } }, methods: { // index 代表从左到开始第index个页号，好吧我也搞混了，最多10个 onSubmit (index) { if (index === -1) { // index为-1代表直接点击查询按钮触发的事件，初始化数据 index = 0 this.page.selected = 0 this.pageList = [ {active: false, value: 1} ] } Axios.post('http://localhost:3000/api/searchJobs', searchData) .then(res => { this.page.count = res.data.pageCount // 总页数 let pageNumber = 1 // 默认第1页 // 若index >= 6且显示的最后一个页号小于总页数，则整体向后移动1，选中的页号相应向左移动1，即index-- if (index >= 6 && (this.page.count - this.pageList[9].value) > 0) { pageNumber = this.pageList[1].value index-- } else if (index < 6 && this.pageList[0].value !== 1) { pageNumber = this.pageList[0].value - 1 index++ } this.pageList = [] // 初始化 pageList，之后会重新渲染 this.page.size = (this.page.count > 10) ? 10 : this.page.count for (let i = 0; i < this.page.size; i++) { let item = { active: false, value: pageNumber } pageNumber++ this.pageList.push(item) } // 改变当前选中页号下标样式，index 代表从左到开始第index个页号，最多10个 this.pageList[this.page.selected].active = false this.pageList[index].active = true this.page.selected = index console.log(searchData.page) }) .catch(err => { console.log(err) }) } } }
源码下载地址：Github源码
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: