vue中DatePicker 日期选择器的使用，当后台传参有开始时间和结束时间，可以使用watch监听器，实现效果

vue中日期选择器一下选取2个数据，而后台传参数需要传2个开始时间和结束时间，所以可以使用watch监听器进行

<template>
  <div>
    <el-form ref="searchForm" :model="searchForm" label-width="100px">
      <el-form-item label="文章状态：">
        <el-radio v-model="searchForm.status" label>全部</el-radio>
        <el-radio v-model="searchForm.status" :label="0">草稿</el-radio>
        <el-radio v-model="searchForm.status" :label="1">待审核</el-radio>
        <el-radio v-model="searchForm.status" :label="2">审核通过</el-radio>
        <el-radio v-model="searchForm.status" :label="3">审核失败</el-radio>
      </el-form-item>
      <el-form-item label="频道列表：">
        <el-select v-model="searchForm.channel_id" placeholder="请选择频道">
    		<el-option
      			v-for="item in channelList"
      			:key="item.id"
      			:label="item.name"
      			:value="item.id">
    		</el-option>
      </el-form-item>
      <el-form-item label="时间选择：">
        <el-date-picker
          v-model="timetotime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Article",
 
  data() {
    return {
      timetotime: "", //一个临时的接收时间的成员
      searchForm: {
        beginTime: "", //开始时间
        endTime: "", //结束时间
        status: "", //""-全部，0-草稿，1-待审核，2-审核通过，3-审核失败
        channel_id: "" //频道id
      },
      channelList:[],//频道列表
    };
  },
   watch: {
    // 被检测的成员：function(newV,oldV){
    //newV:数据变化后的样子，oldV:数据变化前的样子
    // }
    //被检查成员一般就是data成员
    timetotime: function(newV) {
      //把接收到的时间信息一分为二的给beginTime和endTime
      if (newV) {
        this.searchForm.beginTime = newV[0];
        this.searchForm.endTime = newV[1];
      } else {
        //清空时间
        this.searchForm.beginTime = "";
        this.searchForm.endTime = "";
      }
    }
  },
  created(){
    this.getChannelList()
  },
  methods:{
    //获取频道列表的数据
    getChannelList(){
      let pro = this.$http({
        url:"/mp/v1_0/channels",
        methods:"get"
      })
      pro 
      .then(data =>{
        // console.log(data);
        this.channelList = data.data.channels
      })
      .catch(err =>{
        return this.$message.error("或的频道失败：" + err)
      })
    }
  }
};
</script>

<style lang="less" scoped>
</style>

效果如下图所示：