ElmentUI之DateTimePicker 日期时间选择器

文章目录

<!--unlink-panels在范围选择器里取消两个日期面板之间的联动-->
<!--value-format 可选，绑定值的格式。不指定则绑定值为 Date 对象-->
<!-- type显示类型 -->
<!--change 用户确认选定的值时触发 -->
	<el-date-picker
          unlink-panels
          v-model="dateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleClear"
        >
        </el-date-picker>
        <el-form-item>
          <el-button type="primary" @click="conditionQuery">查询</el-button>
        </el-form-item>
<script>
export default {
  data() {
   return {
  	  dateRange: [],// 条件值
  	  params: {//分页参数
         startDate: "",//这里写this.dateRange[0]会报错
         endDate: "",
         currentPage: 1,
         pageSize: 5
      },
    }
  }
  methods: {
     
	handleClear(newValue) {
      this.params.startDate = newValue[0];
      this.params.endDate = newValue[1];
    },
    conditionQuery() {
      this.findAllOrder();
      this.dateRange = [];
      this.params.startDate = "";
      this.params.endDate = "";
    },
	 async getProviderList() {
      const res = await getProviderListService(this.params);
      this.providerList = res.data.list;
      this.totalCount = res.data.total;
    },
  }
}
</script>