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

最近的项目要求甘特图在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>

2. 两个样式

	.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;
	}

3. 实现方法
   设：最小时间为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
欢迎关注支持，谢谢！