内容管理（七） -搜索功能-筛选的时间格式处理、下拉选项的内容选定、下拉框的清除

09-内容管理-搜索功能

• 获取需要提交给后台的参数
  • 状态，频道，参数是双向绑定的
  • 时间 和 dateArr 绑定，选择过时间后，去修改reqParams的两个时间。
    • 监听选择日期事件 change
    • 获取选择的时间 [开始，结束] === 回传参数
    • 转换格式
    • 给reqParams的两个时间赋值
• 绑定筛选事件
  • 发请求即可
• 问题：频道清空后，查询全部频道，值为 “” ，是会发送给后台，需要是number
  • 报错处理，当值为 “” 的时候，处理成null

// 处理日期数据
<el-date-picker
+            @change="changeDate"
            v-model="dateArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"//转格式
          ></el-date-picker>

处理日期时间的方法：

// 选择时间
    changeDate (valueArr) {
      if (valueArr) {
        // 给请求参数赋值
        this.reqParams.begin_pubdate = valueArr[0]
        this.reqParams.end_pubdate = valueArr[1]
      } else {
        // 清除请求参数的值
        this.reqParams.begin_pubdate = null
        this.reqParams.end_pubdate = null
      }
    },

筛选逻辑：

绑事件

<el-button type="primary" @click="search">筛选</el-button>

方法设置：下拉列表项的全选

// 搜索
    search () {
      // 当你重新查询的时候，当前页码应该第一页。
      this.reqParams.page = 1
      // 数据需要处理 频道数据值为 “” 的时候
      if (this.reqParams.channel_id === '') {
        this.reqParams.channel_id = null
      }
      this.getArticles()
    },

加属性，下拉框的选项清空：

<el-select v-model="reqParams.channel_id" placeholder="请选择" clearable>