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

最新推荐文章于 2025-06-22 08:35:52 发布

kuke_kuke

最新推荐文章于 2025-06-22 08:35:52 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： elementui vue

本文链接：https://blog.youkuaiyun.com/qq_33599109/article/details/84256685

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

实现简单的表格

	<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-