前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue+element踩坑记-动态设置表头(以时间作为表头)

vue+element踩坑记-动态设置表头(以时间作为表头)

作者头像
何处锦绣不灰堆
发布2020-05-29 09:36:19
2.6K0
发布2020-05-29 09:36:19
举报
文章被收录于专栏:农历七月廿一农历七月廿一
需求说明

我们都知道element提供了table的组件,非常的好用,前面我也写过一些,但是这次的需求是这样的,就是用户可以自己选择时间,自己选择天数,选择以后呢就可以直接生成起始日期为用户选择的,列数是用户选择的天数,那么表头还要显示出对应的星期。这里的目的是为了实现给用户选择会场的时间段,这样可以直接进行选择,也可以一目了然的选择会场的使用情况。(这个功能下面是没有展示使用情况的)

效果图
效果图
效果图
步骤解析

1、画一个静态的table 2、将表头改为上图的布局 3、写一个可以自动计算当前日期加上往后天数的方法 4、将表头绑定一个可变化的数组 5、将下拉框的组件画上 6、改变数组->实现功能

源码解析
  • Html
代码语言:javascript
复制
<template v-for="(col,index) in base_title">
            <el-table-column :label="col.label">
              <el-table-column
                prop="morning"
                label="上午"
                width="120">
              </el-table-column>
              <el-table-column
                prop="afternoon"
                label="下午"
                width="120">
              </el-table-column>
            </el-table-column>
          </template>
  • JavaScript
代码语言:javascript
复制
		 /**
         * @change_days 改变table的表头数量
         */
        change_days(){
             let that = this;
             that.base_title = [];
             let Max_length = that.value;
             console.log(Max_length )
             for(let i = 0;i<Max_length;i++){
               that.value_date =  that.value_dateVal;
                 let param = {
                     label : that.getDay(i)+""+(that.getWeek(that.getDay(i).toString())),
                     prop : that.getDay(i)
                 };
               that.base_title.push(param);
             }
             console.info(that.base_title);
        },
        /**
         * @getDay 获取日期
         * @doHandleMonth
         * @getWeek 获取当前星期
         */
        getDay(day){
          let that = this;
          let value_day = new Date();
          let target_day_milliseconds= value_day.getTime() + 1000*60*60*24*day;
          value_day.setTime(target_day_milliseconds); //注意,这行是关键代码
          let tYear = value_day.getFullYear();
          let tMonth = value_day.getMonth();
          let tDate = value_day.getDate();
          tMonth = that.doHandleMonth(tMonth + 1);
          tDate = that.doHandleMonth(tDate);
          return tYear+"-"+tMonth+"-"+tDate;
        },
        getWeek(dateString){
          let weekArray = ["(星期日)", "(星期一)", "(星期二)", "(星期三)", "(星期四)", "(星期五)", "(星期六)"];
          return weekArray[new Date(dateString).getDay()];
        },
        doHandleMonth(month){
          let m = month;
          if(month.toString().length === 1){
            m = "0" + month;
          }
          return m;
        },

有几个是需要注意的地方:

  • getWeek 的方法是需要String类型的参数,所以这里是需要进行toString处理,或者直接在参数的后面(+"")
  • 时间格式是不可以进行格式化的,虽然element 的时间格式是支持格式化的,但是如果直接格式化的话,会计算失败,因为js里面是直接对原生的格式进行的处理。
  • 根据时间的变化改变初始值我试了几次,但是失败了,后期我会更新一下,今天有点累了!就不写了!

这套代码基本的功能是实现了,但是没有经过任何的优化的,你们可以自己进行一些优化。喜欢的可以关注一下,一起进步。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-04-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求说明
  • 效果图
  • 步骤解析
  • 源码解析
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档