vue+ele:通过(DatePicker)获取日历开始时间和结束时间传入后台调接口并在表格中渲染相对应的数据

思路:

  1. 使用element-ui中的el-data-picker得到日历样式
  2. 通过v-model绑定每一个el-data-picker里面的日期
  3. 通过change方法触发当选择日期发生变化时重新请求接口

注意:

  • 请求接口传递日历参数值的时候,通过moment协助将日期格式化,并用三元运算符做出处理,当获取不到日期时传递参数为空字符串
 <div class="block">
          <el-date-picker
            class="selectDate"
            v-model="value1"
            type="date"
            placeholder="选择日期"
            @change="getCertificationInfoList"
          ></el-date-picker>
        </div>
        <p class="linkBridge">一</p>
        <div class="block_selDate">
          <el-date-picker
            class="selectDate"
            v-model="value2"
            type="date"
            placeholder="选择日期"
            @change="getCertificationInfoList"
          ></el-date-picker>
        </div>

data定义的变量,包括ele里面的复制代码

 data () {
    return {
      // 日历
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      value1: '',
      value2: '',
    }
  },

调取接口

 getCertificationInfoList () {
      clearTimeout(this.t)
      this.t = setTimeout(() => {
        this.getList({
          applyStatus: this.value,
          enterpriseNumberOrName: this.searchKey,
          createTimeFrom: this.value1
            ? monment(this.value1).format('YYYY-MM-DD')
            : '',
          createTimeTo: this.value2
            ? monment(this.value2).format('YYYY-MM-DD')
            : '',
          page: this.page,
          size: this.pageSize
        })
      }, 500)
    }

猜你喜欢

转载自blog.csdn.net/lqlq54321/article/details/109288609