vxe-gantt 甘特图实现产品进度列表，自定义任务条样式和提示信息
vxe-gantt 甘特图实现产品进度列表，自定义任务条样式和提示信息查看官网：https://gantt.vxeui.com/
gitbub：https://github.com/x-extends/vxe-gantt
gitee：https://gitee.com/x-extends/vxe-gantt
安装
npm install xe-utils@3.8.0 vxe-pc-ui@4.10.45 vxe-table@4.17.26 vxe-gantt@4.1.1// ...
import VxeUIBase from 'vxe-pc-ui'
import 'vxe-pc-ui/es/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/es/style.css'
import VxeUIGantt from 'vxe-gantt'
import 'vxe-gantt/lib/style.css'
// ...
createApp(App).use(VxeUIBase).use(VxeUITable).use(VxeUIGantt).mount('#app')
// ...效果
代码
通过 task-view-config.viewStyle.cellStyle 设置任务视图单元格样式，使用 taskBar、taskBarTooltip 插槽来自定义模板
<template>
<vxe-gantt v-bind="ganttOptions">
<template #task-bar="{ row }">
<vxe-image :src="row.imgUrl" width="60" height="60"></vxe-image>
{{ row.title }}
开始日期：{{ row.start }}
结束日期：{{ row.end }}
进度：{{ row.progress }}%
</template>
<template #task-bar-tooltip="{ row }">
任务名称：{{ row.title }}
开始时间：{{ row.start }}
结束时间：{{ row.end }}
进度：{{ row.progress }}%
</template>
</vxe-gantt>
</template>https://gitee.com/x-extends/vxe-gantt
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]