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];
     }
   }
 }
相关推荐
踩着两条虫16 小时前
VTJ.PRO AI Agent 技术白皮书
前端·vue.js·低代码
java1234_小锋18 小时前
Vue3专题 - 列表渲染
vue.js
小锋java123421 小时前
【技术专题】Vue3 - 列表渲染
vue.js·vite
zho_uzhou1 天前
ubuntu服务端运行vue网页步骤
linux·服务器·vue.js·ubuntu
滴滴答答哒1 天前
VUE3+element-plus MultiSelect 多选下拉组件
前端·javascript·vue.js
其美杰布-富贵-李1 天前
04 watch 与 Vue 响应式数据流
前端·javascript·vue.js
其美杰布-富贵-李2 天前
03 ref、reactive 与 computed 响应式数据
前端·javascript·vue.js
嘟嘟07172 天前
useRef + Web Worker:React 中的耗时计算不卡页面
javascript·vue.js
万敏2 天前
Vue3 全栈实战第五周:Vitest 单元测试从零搭建实战记录
vue.js·node.js·全栈
sugar__salt2 天前
跟着 Demo 学 Pinia:两种仓库写法 + 完整 TodoList 复现
前端·javascript·vue.js·前端框架·vue