Vue+Element后台管理页⾯之实现报表数据查询与清空的按钮如图：
代码如下：
<!-- 查询清空按钮 -->
<span class="inline-span butt">
<el-button type="primary" v-on:click="getFinaDetailsData" plain icon="el-icon-search">查询</el-button>
<el-button icon="el-icon-delete" v-on:click="resetData">清空</el-button>
</span>
//⼀些数据变量须在data⾥先声明，⾃⾏添加
watch: {
dateRangeParam: {
handler (newValue, oldValue) {
},
deep: true
}
},
methods: {
// 点击查询
getFinaDetailsData () {
this.currentPage = 1
vue element admin
start: this.dateRangeParam[0],
end: this.dateRangeParam[1],
storeId: this.storeId,
orderId: derId,
payType: this.payType,
incPayType: this.incPayType,
minAmount: this.minAmount,
maxAmount: this.maxAmount,
current: this.currentPage,
size: this.pageSize
})
this.$http({
url: this.$http.adornUrl('项⽬地址'),
method: 'get',
params: this.$http.adornParams({
start: this.dateRangeParam[0],
end: this.dateRangeParam[1],
storeId: this.storeId,
orderId: derId,
payType: this.payType,
incPayType: this.incPayType,
minAmount: this.minAmount,
maxAmount: this.maxAmount,
current: this.currentPage,
size: this.pageSize
})
}).then(({ data }) => {
console.log(data)
this.tableData = ds
// 将⽀付类型（int）转中⽂（str）
this.tableData.forEach(element => {
element.payType = this.payTypeList[element.payType]
})
this.currentPage = data.current
this.pageSize = data.size
this.pageTotal = al
})
},
// 点击清空
resetData () {
this.payType = -1
this.incPayType = 0
this.maxAmount = null
this.minAmount = null    }
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。