el-date-picker时间范围搜索条件,watch监听

el-date-picker时间范围搜索条件 使用watch监听

HTML部分:
VUE 复制代码
<el-form-item label="日期选择" prop="orderNo">
        <el-date-picker
          v-model="dataList"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
JS部分:
JS' 复制代码
export default {
  data() {
    return {
      dataList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startDate: null,
        endDate:null,
      },
    }
  },
  watch: {
      // 监听 dataList 变化
      dataList(newVal) {
        this.queryParams.startDate = newVal[0];
        this.queryParams.endDate = newVal[1];
     }
   }
 }
相关推荐
MXN_小南学前端5 小时前
watch详解:与computed 对比以及 Vue2 / Vue3 区别
前端·javascript·vue.js
2601_949814696 小时前
Docker部署Spring Boot + Vue项目
vue.js·spring boot·docker
Lkstar8 小时前
逐步搞懂 Vue 的 patchChildren,把 Diff 算法拆给你看
vue.js
nbsaas-boot9 小时前
100万门店级分货系统架构设计
前端·javascript·vue.js
笋笋~10 小时前
el-tree 拖拽事件隔离:实现句柄独立控制,区域分离
javascript·vue.js·elementui
前端那点事11 小时前
Vue生命周期速查:Vue2+Vue3钩子全解析,新手也能秒懂
前端·vue.js
Aotman_12 小时前
Element UI 表格搜索高亮
前端·javascript·vue.js·ui·elementui
yqcoder13 小时前
[特殊字符] Vue 3 中 Keep-Alive 对生命周期的影响:深度解析
前端·javascript·vue.js
MXN_小南学前端14 小时前
computed 计算属性详解:触发时机、实战场景、Vue2 与 Vue3 对比
前端·javascript·vue.js
六月的可乐14 小时前
知识库检索入门:从普通 RAG、知识图谱 RAG 到 LLM Wiki,一篇讲清原理、区别与选型
vue.js·人工智能·openai