vue vxe-gantt 甘特图的使用

vue vxe-gantt 甘特图的使用
查看官网：https://vxeui.com
Github：https://github.com/x-extends/vxe-gantt
Gitee：https://gitee.com/x-extends/vxe-gantt

1. npm install vxe-pc-ui@4.8.19 vxe-table@4.16.0 vxe-gantt@4.0.0

复制代码

1. // ...
2. import VxeUIAll 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(VxeUIAll).use(VxeUITable).use(VxeUIGantt).mount('#app')
13. // ...

复制代码

基础功能

1. <template>
2.   
3.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
4.   
5. </template>

复制代码

显示任务进度

通过 task-bar-config.showProgress 显示任务进度

1. <template>
2.   
3.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
4.   
5. </template>

复制代码

设置颜色

1. <template>
2.   
3.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
4.   
5. </template>

复制代码

单选框

1. <template>
2.   
3.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
4.   
5. </template>

复制代码

复选框

1. <template>
2.   
3.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
4.   
5. </template>

复制代码

子任务

1. <template>
2.   
3.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
4.   
5. </template>

复制代码

查询表单

1. <template>
2.   
3.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
4.   
5. </template>

复制代码

数据分页

1. <template>
2.   
3.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
4.   
5. </template>

复制代码

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

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除