发现问题
使用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>
直视问题
f12究竟改变了什么，才导致那个分页数目是否显示
控制样式的都是css，既然css这么厉害，我们就观察一下f12窗口触发分页数目显示和隐藏的两个条件；
以下的条件只是我的推测（不过后来确实可以解决这个分页数目问题）：
- 条件一：f12窗口高度
小于页面内容高度一半，分页数目不出来； - 条件二：f12窗口高度
大于页面内容高度一半，分页数目会出来。
针对上面两个触发点，前后截取了对应的css变化，如下图：
观察后得到，是由x-placement来控制分类数目显示的
尝试解决
从上面观察得到的解决方法是x-placement=top才可以显示分类数目
于是尝试加上了x-placement=top给Page这一组件上面：
但是还是不能解决，这怎么回事？
- 是不是这个属性有问题还是我的单词写错了？
搜索了一会后，越发觉得这个像是自定义的属性，这就有点坑，意思就是还不能这样直接写，必须要有特别的指定关键字来指定对应的值最后才会被渲染成x-placement
换一种思路，从组件一层一层来找
关系图如下：
从Page组件 到 Options组件 到 i-selelct组件，里面定义的内容有个 v-bind属性为placement，那么我们那个page不能写成x-placement了，应该是 placement 这个，写法如下图：
最后效果
