ElmentUI之DateTimePicker 日期时间选择器

文章目录

html 复制代码
<!--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>
相关推荐
xcg3401232 天前
ElementUI-Table 表格实现行拖拽
elementui·table·行拖拽
rggrgerj2 天前
VUE3+element plus 实现表格行合并
javascript·vue.js·elementui
fxshy2 天前
Vue3和element plus在el-table中使用el-tree-select遇到的change事件坑
javascript·vue.js·elementui
北慕阳2 天前
自存19-48
javascript·vue.js·elementui
_Legend_King3 天前
高德地图实现经纬度及获取编码、所属行政区、GIS
javascript·vue.js·elementui
LoveEate8 天前
vue 在el-tabs动态添加添加table
javascript·vue.js·elementui
krifyFan8 天前
vue3+elementPlus el-date-picker 自定义禁用状态hook 实现结束时间不能小于开始时间
前端·vue.js·elementui
一颗努力的大土豆8 天前
关于解决switch开关属性中active-value=“1“为数值形失败的问题
javascript·vue.js·elementui
Liu.7748 天前
vue3 中实现 Element Plus 表格合并
javascript·vue.js·elementui
SevgiliD8 天前
解决使用 fixed固定列时el-table导致纵向滚动条问题
前端·vue.js·elementui