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) {
        this.getFinaDetailsData()
      },
      deep: true
    }
  },
 methods: {
    // 點擊查詢
    getFinaDetailsData () {
      this.currentPage = 1
      this.tempFormData = Object.assign({
        start: this.dateRangeParam[0],
        end: this.dateRangeParam[1],
        storeId: this.storeId,
        orderId: this.orderId,
        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: this.orderId,
          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 = data.records
        // 將支付類型（int）轉中文（str）
        this.tableData.forEach(element => {
          element.payType = this.payTypeList[element.payType]
        })
        this.currentPage = data.current
        this.pageSize = data.size
        this.pageTotal = data.total
      })
    },
    // 點擊清空
    resetData () {
      this.orderId = null
      this.payType = -1
      this.incPayType = 0
      this.maxAmount = null
      this.minAmount = null
    }
}