俞秋荣 发表于 2025-8-15 22:11:35

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
npm install vxe-pc-ui@4.8.19 vxe-table@4.16.0 vxe-gantt@4.0.0// ...
import VxeUIAll 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(VxeUIAll).use(VxeUITable).use(VxeUIGantt).mount('#app')
// ...基础功能


<template>

    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>

</template>显示任务进度

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

<template>

    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>

</template>设置颜色


<template>

    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>

</template>单选框


<template>

    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>

</template>复选框


<template>

    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>

</template>子任务


<template>

    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>

</template>查询表单


<template>

    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>

</template>数据分页


<template>

    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>

</template>https://gitee.com/x-extends/vxe-gantt

来源:豆瓜网用户自行投稿发布,如果侵权,请联系站长删除
页: [1]
查看完整版本: vue vxe-gantt 甘特图的使用