vxe-gantt 甘特图实现产品进度列表，自定义任务条样式和提示信息

vxe-gantt 甘特图实现产品进度列表，自定义任务条样式和提示信息
查看官网：https://gantt.vxeui.com/
gitbub：https://github.com/x-extends/vxe-gantt
gitee：https://gitee.com/x-extends/vxe-gantt
安装

1. npm install xe-utils@3.8.0 vxe-pc-ui@4.10.45 vxe-table@4.17.26 vxe-gantt@4.1.1

复制代码

1. // ...
2. import VxeUIBase from 'vxe-pc-ui'
3. import 'vxe-pc-ui/es/style.css'
5. import VxeUITable from 'vxe-table'
6. import 'vxe-table/es/style.css'
8. import VxeUIGantt from 'vxe-gantt'
9. import 'vxe-gantt/lib/style.css'
10. // ...
12. createApp(App).use(VxeUIBase).use(VxeUITable).use(VxeUIGantt).mount('#app')
13. // ...

复制代码

效果

代码

通过 task-view-config.viewStyle.cellStyle 设置任务视图单元格样式，使用 taskBar、taskBarTooltip 插槽来自定义模板

1. <template>
2.   
3.     <vxe-gantt v-bind="ganttOptions">
4.       <template #task-bar="{ row }">
5.         
6.          
7.             <vxe-image :src="row.imgUrl" width="60" height="60"></vxe-image>
8.          
9.          
10.             {{ row.title }}
11.             开始日期：{{ row.start }}
12.             结束日期：{{ row.end }}
13.             进度：{{ row.progress }}%
14.          
15.         
16.       </template>
18.       <template #task-bar-tooltip="{ row }">
19.         
20.           任务名称：{{ row.title }}
21.           开始时间：{{ row.start }}
22.           结束时间：{{ row.end }}
23.           进度：{{ row.progress }}%
24.         
25.       </template>
26.     </vxe-gantt>
27.   
28. </template>

复制代码

https://gitee.com/x-extends/vxe-gantt

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！