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];
     }
   }
 }
相关推荐
Mr Xu_1 小时前
Vue3 + Element Plus 实现点击导航平滑滚动到页面指定位置
前端·javascript·vue.js
pas1361 小时前
35-mini-vue 实现组件更新功能
前端·javascript·vue.js
软弹5 小时前
Vue2 的数据响应式原理&&给实例新增响应式属性
前端·javascript·vue.js
weixin_638303116 小时前
uniapp组合式和选项式
javascript·vue.js·uni-app
【赫兹威客】浩哥6 小时前
【赫兹威客】框架模板-前端命令行部署教程
前端·vue.js
一殊酒6 小时前
【前端开发】Vue项目多客户配置自动化方案【一】
前端·vue.js·自动化
切糕师学AI7 小时前
Vue 中 keep-alive 组件的生命周期钩子
前端·vue.js·keep-alive·生命周期·activated·deactivated
daols887 小时前
vue2 表格如何使用 vxe-table 带列头复制单元格内容同步到 excel 中
vue.js·excel·vxe-table
ethan.Yin7 小时前
element-plus 二次封装遇到的一点疑惑
javascript·vue.js·ecmascript
切糕师学AI7 小时前
Vue 中的 keep-alive 组件
前端·javascript·vue.js