vue项目中的elementui的表格中画甘特图

作者:未知 / 来源:网络 / 整理:脚本之家如果知识不能与人分享,这不算是真正的知识了。
最近的项目要求甘特图在elementui中实现,在此做出总结。性能限制,不能传入太多的数据。条件(时间):计划开始时间、计划结束时间、开始时间、结束时间、最大时间和最小时间。思维:渲染表格头、渲染天数、填充色块。实现简单的表格<el-table:data = "tableData"border><el-table-columnlabel="序号...

最近的项目要求甘特图在elementui中实现,在此做出总结。
性能限制,不能传入太多的数据。
条件(时间):计划开始时间、计划结束时间、开始时间、结束时间、最大时间和最小时间。
思维:渲染表格头、渲染天数、填充色块。

  1. 实现简单的表格
 <el-table
        :data = "tableData"
        border
    >
        <el-table-column
            label="序号"
            type="index"
            align="center"
            width="40"
        ></el-table-column>
        <el-table-column
            label="计划开始时间"
            prop="planned_start"
            align="center"
            width="110"
        >
            <template slot-scope="scope">
                <span>{{ scope.row.planned_start }}</span>
            </template>
        </el-table-column>    
        <el-table-column
            label="计划结束之间"
            prop="planned_end"
            align="center"
            width="100"
        >
            <template slot-scope="scope">
                <span>{{ scope.row.planned_end }}</span>
            </template>
        </el-table-column>
        <el-table-column
            label="实际开始时间"
            prop="start_date"
            align="center"
            width="110"
        >
            <template slot-scope="scope">
                <span>{{ scope.row.start_datet }}</span>
            </template>
        </el-table-column>
        <el-table-column
            label="实际结束时间"
            prop="end_date"
            align="center"
            width="110"
        >
            <template slot-scope="scope">
                <span>{{ scope.row.end_date }}</span>
            </template>
        </el-table-column>
        <el-table-column
            v-for="(item,index) in showMonths"
            :label="item.month"                 // 渲染月份
            prop="showMonths"
            align="center"
            :key="index"
        >
            <el-table-column
                v-for="(it,index1) in item.daysArr"
                :label="it.day"
                width="20"
                style="padding: 0; margin: 0;"
                align="center"
                :key="index1"
            >
                <template slot-scope="scope1" class="progressCon">
                    <div :class="scope1.row['s-' + item.str + '-' + it.day] ? 'progressUpon' : '' "></div>
                    <div :class="scope1.row['t-' + item.str + '-' + it.day] ? 'progressDownon' : '' "></div>
                </template>
            </el-table-column>
        </el-table-column>
    </el-table>
  1. 两个样式
 .el-table--enable-row-transition .el-table__body td{
        position: relative;
    }
    .progressCon{
        padding: 0;
        margin: 0;
        position: relative;
    },progressUpon{
        background: rgb(38,84,124);
        height: 10px;
        width: 20px;
        z-index: 3;
        position: absolute;
        top: 8px;
    },progressDownon{
        background: rgb(255,209,102);
        height: 10px;
        width: 20px;
        z-index: 3;
        position: absolute;
        top: 25px;
        left: 0px;
    }
  1. 实现方法
    设:最小时间为startDate、最大时间为endDate、表格数据为tableData;
 // 渲染表格头,首先是年月,如2018年11月
    getChartTitle(startDate,endDate){
        var chartTable = this.tableDate;
        for(var i = 0; i < chartTable.length; i++){
            var planStartDate = chartTable[i].planned_start;
            var planEndDate = chartTable[i].planned_end;
            var realStartDate = chartTable[i].start_date;
            var realEndDate = chartTable[i].end_date;
            var mainObj = chartTable[i];
            var allPlanArr = this.getAll(planStartDate,planEndDate);            // 获取两段时间中的所有日期,添加到数据的表格中
            if(allPlanArr){
                for(var j = 0; i < allPlanArr.length; j++){
                    var objIndex = "s-" + allPlanArr[j]'
                    mainObj[objIndex] = true;
                }
            }
            var all RealArr = this.getAll(realStartDate,realEndDate);
            if(allRealArr){
                for(var j = 0; j < allRealArr.length; j++){
                    var objIndex = "t-" + allRealArr[j];
                    mainObj[objIndex] = true;
                }
            }
        }

        // 以下操作把数据放到表格中
        var dateArr = this.getAll(startDate,endDate);           // 表格上方的标题和日期
        this.getYearArr(dateArr);                   //获取并拼接我们需要的年月信息。
        var allYearArr = this.getYearArr(dateArr);

        var allMonths = []'
        for(var i = 0; i < allYearArr.length; i++){
            for(var j = 0; j < allYearArr[i]/days.length; j++){
                allMonths.push(allYearArr[i].days[j]);
            }
        }
        this.showMonths = allMonths;        // 渲染表格上部的标题

    }

    // 获取时间数组的函数
    getAll(begin,end){          // 开始时间和结束时间有不存在的
        if(!begin || !end){
            return false;
        }
        // 获取两个日期之间的所有日期
        Date.prototype.format = function(){
            var s = "";
            var month = this.getMonth() + 1;
            var day = this.getdate();
            s += this.getFullYear() + '-';
            s += month + '-';
            s += day;
            return s;           // 返回可以prop进表格的数据如:'s-2018-11-19'
        }
        var ab = begin.split('-');
        var ae = end.split('-');
        var db = new date();
        db.setUTCFullYear(ab[0],ab[1] - 1,ab[2]);
        var de = new date();
        de.setUTCFullYear(ae[0],ae[1] - 1,ae[2]);
        var unixDb = db.getTime();
        var unixDe = de.getTime();
        var arr = [];
        for(var k = unixDb,k <= unixDe; ){               // 开始的时间戳,结束的时间戳
            arr.push(new Date(parseInt(k)).format());
            k = k + 24 * 60 * 60 * 1000;
        }
        return arr;
    }

    // 获取我们需要的格式的年月日信息
    getYearArr(dateArr){
        // 获取我们需要格式的年月信息
        var yearArr = [];
        var arr1 = [];      // 存年
        for(var i = 0; i < dateArr.length; i++){
            var fullYear = new Date(dateArr[i]).getFullYear();
            if(arr1.indexOf(fullYear) >= 0){
                // 有这一年,继续
                continue;
            }else{
                arr1.push(fullYear);        // 没有就新增
            }
        }
        for(var i = 0; i < arr1.length; i++){
            var yearObj = {
                year: "",months: [],// 放月的数组
                days: [
                    {
strs: "",month: "",daysArr: [
day: "",a: "",b: ""
]
                    }
                ]
            };
            yearArr.push(yearObj);
            yearArr[i].year = arr1[i];      // 赋值年
        }
        for(var i = 0; i < arr1.length; i++){
            // 遍历拥有的年
            yearArr[i].months = [];
            for(var j = 0; j < dateArr.length; j++){
                // 遍历日期 获得这一年,依据这一年获取月份
                var fullYear = new Date(dateArr[j]).getFullYear();
                if(arr1[1] == fullYear){
                    // 当数组中的年和日期的年相等时,获取月份
                    var fullYear = new Date(dateArr[j]).getFullMonth() + 1;
                    if(yearAll[i].months.indexOf(fullMonth) >= 0){
// 这一年的月中有这个月
continue;
                    }else{
// 没有这个月,添加这个月,并且,获取这个月的天数,并添加
yearArr[i].months.push(fullMonth);
                    }
                }
            }
        }
        for(var i = 0; i < yearArr.length; i++){
            // 遍历年
            for(var j = 0; j < yearArr[i].months.length; j++){
                // 遍历月,根据年月获取当前月的天数
                var monthsDays = this.getLastDay(yearArr[i].year,yearArr[i].months[j]);
                yearArr[i].days[j] = {};
                yearArr[i].days[j].str = yearArr[i].year + "-" + yearArr[i].months[j];          // 赋值月
                yearArr[i].days[j].month = yearArr[i].year + "年" + yearArr[i].months[j] + "月";  // 赋值月
                yearArr[i].days[j].daysArr = [];
                for(var k = 1; k <= monthsDays; k++){
                    // 赋值天
                    var dayObj = {
day: ""
                    };
                    yearArr[i].days[j].daysArr.push(dayObj);
                    yearArr[i].days[j].daysArr[k-1].day = k + "";
                }
            };
        }
        return yearArr;
    }

    // 获取月的最后一天
    getLastDay(myyear,mymonth){
        var new_date = new Date(myyear,mymonth,0);
        return new_date.getdate();
    }

缺点:日期范围不能过大,不然表格加载缓慢!!!

作者:rookie.he(kuke_kuke)
博客链接:http://blog.csdn.net/qq_33599109
欢迎关注支持,谢谢!

你可能在找的问题:

vue教程

Vue页面跳转动画效果的实现方法

百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法,需要的朋友可以参考下

vue教程

vue构建动态表单的方法示例

这篇文章主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

玩转vue的slot内容分发

这篇文章主要介绍了玩转vue的slot内容分发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

vue 巧用过渡效果(小结)

这篇文章主要介绍了vue 巧用过渡效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部