分页的效果做不出来,无论怎么改,页面的数据都是总数,不会跟着页数变化
<div class="order-list-table">
<table>
<tr>
<th v-for="head in tableHeads" @click="changeOrderType(head)" :class="{active:head.active}">{{ head.label }}</th>
</tr>
<tr v-for="item in tableData" :key="item.period">
<td v-for="head in tableHeads">{{ item[head.key] }}</td>
</tr>
</table>
<v-pagenation :total="total" :page-size="pageSize" @on-change="pageChange"></v-pagenation>
</div>
</div>
</template>
<script>
import VSelection from '../components/base/selection'
import VDatePicker from '../components/base/datePicker'
import VPagenation from '../components/base/pagenation'
import _ from 'lodash'
export default {
components: {
VSelection,
VDatePicker,
VPagenation
},
data () {
return {
query: '',
productId: 0,
startDate: '',
endDate: '',
products: [
{
label: '数据统计',
value: 0
},
{
label: '数据预测',
value: 1
},
{
label: '流量分析',
value: 2
},
{
label: '广告发布',
value: 3
}
],
tableHeads: [
{
label: '订单号',
key: 'orderId'
},
{
label: '购买产品',
key: 'product'
},
{
label: '版本类型',
key: 'version'
},
{
label: '有效时间',
key: 'period'
},
{
label: '购买日期',
key: 'date'
},
{
label: '数量',
key: 'buyNum'
},
{
label: '总价',
key: 'amount'
}
],
currentOrder: 'asc',
tableData: [],
total: 0,
pageSize: 5,
offset: 0
}
},
watch: {
query () {
this.getList()
}
},
methods: {
productChange (obj) {
console.log(obj)
this.productId = obj.value
this.getList()
},
getStartDate (date) {
this.startDate = date
this.getList()
},
getEndDate (date) {
this.endDate = date
this.getList()
},
pageChange (offset) {
this.offset = offset * this.pageSize
this.getList()
},
getList () {
let reqParams = {
query: this.query,
productId: this.productId,
startDate: this.startDate,
endDate: this.endDate
}
this.$http.post('/api/getOrderList', reqParams).then((res) => {
console.log(res)
this.tableData = res.data.data.list
this.total = res.data.data.list.length
//this.total=res.data.data.total就页面显示不了页数等等,只能改为上面的才出现页数,但是页面的数据全部出来了,和页数不对,分页组件用的是你们提供的pagenation.vue,但无论是那个组件还是找网上其他组件vue,出来的效果都同上,暂时没有用上vuex,尝试用了,功能更残缺了,请问怎么解决
}, (err) => {
})
},
changeOrderType (headItem) {
this.tableHeads.map((item) => {
item.active = false
return item
})
headItem.active = true
if (this.currentOrder === 'asc') {
this.currentOrder = 'desc'
}
else if (this.currentOrder === 'desc') {
this.currentOrder = 'asc'
}
this.tableData = _.orderBy(this.tableData, headItem.key, this.currentOrder)
}
},
mounted () {
this.getList()
console.log(this.$store)//检测store是否成功引入到组件里
}
}
</script>
正在回答 回答被采纳积分+3
相似问题
登录后可查看更多问答，登录/注册
