VUE组件-甘特图简易封装

前言

之前VUE项目需要用到甘特图,又和网上开源的甘特图需求有些不一样,所以简单的封装了一个,因为是简单的封装所以,功能也没有其他开源的那么全,如果需要的话尽管拿去.

 

效果展示

 

 

 

 

 配置说明

<QinghaGantt
          :columns="gantt.columns"
          :title="gantt.title"
          :days="gantt.days"
          :table="gantt.table"
          :getColor="getColor"
          @tasksItemClick="tasksItemClick"
        />

gantt: {
        title: "",标题名称
        days: 0, //需要指定展示多少天,当月数据
        table: [ //此处展示具体数据
　　　　　　　[{
　　　　　　　　　

　　　　　　　　　　levelOne:"儿童文创",
　　　　　　　　　　tasks:[{
                         label: "A",
　　　　　　　　　　　　　　 start: 2, //开始
　　　　　　　　　　　　　　 end: 3,//结束
　　　　　　　　　　　　　　 progress:3//当前所在位置

　　　　　　　　　　}]

　　　　　　　}]
　　　　 ],
        columns: [
          {
            label: "", //声明表头名称,可以不指定,实现下方 labelrender 的h函数 渲染表头
            value: "id", //所取字段的key 帮助其从后台数据中取出值,也可以不指定 实现下方render 的h函数 可以渲染当前cell
            width: 10, //设定长度
            labelrender: (h) => {
              return h("el-checkbox", {
                props: {
                  type: "success",
                  size: "small",
                },
                style: {
                  marginRight: "5px",
                },
                on: {
                  change: (event) => {

　　　　　　　　　　　　　　this.checkValueAllChange(event);

                  },
                },
              });
            },
            render: (h, params) => {
              return h("el-checkbox", {
                props: {
                  value: params.row.checkValue,
                  
                },
                on: {
                  change: (event) => {
                    this.checkValuChange(event, params.row, params.index);
                  },
                },
              });
            },
          },
          {
            id: 2,
            label: "一级分类",
            value: "levelOne",
            // width: 50,
          },
 
        ],
      },

//方法说明
//:getColor="getColor"

　　getColor(task) { //可用于控制task颜色

      return "#4C4C4C";

    },

// @tasksItemClick="tasksItemClick"

　　tasksItemClick(info, item, infoindex, index){//每个task点击会调用的方法

      console.log(info);

      console.log(item);

    },

 

使用方法

npm install --save qingha-gantt

 

源码地址

https://github.com/liyunq/qingha-gantt

如果不吝啬的,给我颗小星星吧,来自直男的笔芯