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>
相关推荐
theOtherSky11 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
没逛够1 天前
Vue 自适应高度表格
javascript·vue.js·elementui
console.log('npc')2 天前
使用 Vue3 和 Element Plus 实现选择新增用户集下拉选项框,切换类型,有物业,网格,电子围栏,行政区划管理
javascript·vue.js·elementui
一只小阿乐2 天前
做一个vue3 v-model 双向绑定的弹窗
javascript·vue.js·elementui·vue3·v-model
@AfeiyuO3 天前
el-table 表格嵌套表格
前端·elementui·vue
shuaijie05184 天前
表格单元格输入框转换-其一
javascript·elementui
Z_B_L4 天前
问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题
前端·javascript·vue.js·elementui·1024程序员节
Onlyᝰ4 天前
前端tree树
javascript·vue.js·elementui
hongc935 天前
element-ui el-table 设置固定列fixed 高度不对
前端·vue.js·elementui
欧阳呀8 天前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui