使用elementUI的日期时间选择器+下拉菜单+tab切换+table表格完成排行榜的切换及按年月周查询(部分代码)

<div class="hot-top">
  <p>
       <el-date-picker v-model="dataValue" :type="type" :picker-options="pickerOptions"
           :value-format="type==='year'?'yyyy':type==='month'?'yyyy-MM':'yyyy-MM-dd'"
           :format="type==='year'?'yyyy':type==='month'?'yyyy-MM':'yyyy 第 WW 周'"
           :placeholder="type==='year'?'选择年':type==='month'?'选择月':'选择周'" size="small"
           @change="dataPickChange">
       </el-date-picker>
       <el-dropdown split-button type="primary" size="small" style="margin-left:20px;"
           @command="handCommand">
           {{`条件查询(${type==='year'?'年':type==='month'?'月':'周'})`}}
           <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="year">按年查询</el-dropdown-item>
               <el-dropdown-item command="month">按月查询</el-dropdown-item>
               <el-dropdown-item command="week">按周查询</el-dropdown-item>
           </el-dropdown-menu>
       </el-dropdown>
   </p>
   <span v-for="(value,key) in screen" :key="key" :class="{ 'activeClass' : key === curSearchKey }"
       @click="setCurSearchKey(key)">{{value}}
   </span>
</div>

export default {
    data () {
        return {
            pickerOptions: { //日期时间选择器之今天以后的时间禁用
                disabledDate (time) {
                    return time.getTime() > Date.now() - 8.64e6
                }
            },
            type: 'year',//默认日期选择器的type为年
            dataValue: '',
            curSearchKey: '',
            screen: {
                lessonHotRanking: '最热课堂 Top',
                lessonExpHotRanking: '最热实验 Top',
                teacherHotRanking: '最热老师 Top',
                userHotRanking: '最活跃用户 Top',
            },
            params: {}, //年月周参数
        }
    },

dataPickChange (key) {
//当时间选择器选中的值发生改变时,根据type的类型传不同的值,比如年就只传year,月就传year+month,周就传year+week
		 let arr = []
		  if (this.type === 'year') {
		      this.params = {
		          year: key
		      }
		  } else if (this.type === 'month') {
		      arr = key.split('-')
		      this.params = {
		          year: arr[0],
		          month: arr[1]
		      }
		  } else {
		      arr = key.split('-')
		      this.params = {
		          year: arr[0],
		          week: this.getWeek(key)
		      }
	   }
},
getWeek (dt) { //获取当前星期几
            let d1 = new Date(dt);
            let d2 = new Date(dt);
            d2.setMonth(0);
            d2.setDate(1);
            let rq = d1 - d2;
            let days = Math.ceil(rq / (24 * 60 * 60 * 1000));
            let num = Math.ceil(days / 7);
            return num > 1 ? num + 1 : num
},
handCommand (k) { //下拉菜单部分逻辑
            this.dataValue = ''
            this.type = k
  },
 setCurSearchKey (key) {  //切换screen菜单,created中需要调用一次,获得默认的curSearchKey 
	     let value = key;
	     if (!value || !this.screen[value]) {
	         value = Object.keys(this.screen)[0];
	     }
	     this.curSearchKey = value;
 },