vue中下拉框、输入框、日期处理

方法一：直接用监听来处理下拉、输入框、日期**（注意mounted中和监听日期时都会初始化列表，做法：去掉mounted中的列表初始化方法）**

    watch: {
    "query.name"(newName) {
      this.query.page = 1;
      if (newName !== null) {
        this.query.name = newName ? newName : null;
        this.render();
      }
    },
    **//下拉框选择    （newName中包含0或不包含0时都可以用）**
     "params.state": {
      handler(newName, oldName) {
         console.log(newName);
         this.params.page = 1;
        this.params.state = newName == "" && newName != "0" ? null : newName;
        if (newName != null) this.getData();
       },
      immediate: true,
     },
      **//日期选择**
    doubles: {
      handler(newVisible, oldVisible) {
        if (Array.isArray(newVisible)) {
          this.render();
        } else {
          this.doubles = [];
        }
      },
      immediate: true,
    },
  },

方法二：键盘输入回车刷新、日期/下拉选择通过change来更新数据

 <el-date-picker
                v-model="dateList"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDate"
                style="width: 250px"
              >
              </el-date-picker>
 <el-input
                id="aaa"
                v-model="onSiteQuery.keyword"
                clearable
                placeholder="请输入巡检编号"
                style="width: 150px"
                @keyup.enter.native="getList"
              ></el-input>
 <el-form-item prop="stype">
            <el-select
              v-model="params.state"
              placeholder="请选择报建状态"
              clearable
              @change="changeS"
            >
              <el-option
                v-for="(item, index) in slist"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
     </el-form-item>
    ...
 data() {
    return {
    dateList:[]
    }
 },
  watch: {
    "onSiteQuery.keyword"(val) {
      this.query.page = 1;
      this.onSiteQuery.keyword = val ? val : null;
      //这里仅处理清空数据时刷新列表
      if (val == "") this.getList();
    },
  },
    methods: {
    **//下拉框选择    （newName中包含0或不包含0时都可以用）**
     changeS(newName) {
        this.params.page = 1;
        this.params.state = newName == "" && newName != "0" ? null : newName;
        this.getData();
    },
    **//日期选择**
    changeDate(){
      if (this.dateList && this.dateList.length) {
             this.onSiteQuery.stime = this.dateList[0].getTime() / 1000;
             this.onSiteQuery.etime = parseInt(
             (this.dateList[1].getTime() + 24 * 60 * 60 * 1000 - 1) / 1000
              );
          } else {
              this.onSiteQuery.stime = null;
              this.onSiteQuery.etime = null;
         }
          this.getList()
    },
     //请求列表
     getList() {
       
     // 在此处请求数据
      }
    }