[Bug] 为什么会有一个线

[sjh612]

Version

"@visactor/vtable": "^1.17.0", "@visactor/vtable-gantt": "^1.17.0",

Link to Minimal Reproduction

https://gitee.com/songtonngxue/vue3-element-plus-vue/blob/master/src/views/gantt/index.vue

Steps to Reproduce

<template>
  <div class="gantt-container">
    <el-card class="gantt-card">
      <template #header>
        <span>工单甘特图</span>
      </template>
      <div class="table-wrapper">
        <div ref="tableContainer" class="gantt-table"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Gantt } from "@visactor/vtable-gantt";

const tableContainer = ref(null);
const records = [
  {
    id: 1,
    title: "产品A生产工单",
    workOrderNo: "WO-2024-001",
    source: "系统创建",
    workstation: "生产线1",
    taskSource: "计划任务",
    start: "2024-01-10",
    end: "2024-01-20",
    progress: 0,
    children: [
      {
        id: 11,
        title: "原料准备",
        workOrderNo: "WO-2024-001-1",
        source: "系统创建",
        workstation: "原料仓库",
        taskSource: "计划任务",
        start: "2024-01-10",
        end: "2024-01-12",
        progress: 100
      },
      {
        id: 12,
        title: "组装工序",
        workOrderNo: "WO-2024-001-2",
        source: "系统创建",
        workstation: "组装工作站",
        taskSource: "计划任务",
        start: "2024-01-12",
        end: "2024-01-15",
        progress: 80
      },
      {
        id: 13,
        title: "质检工序",
        workOrderNo: "WO-2024-001-3",
        source: "系统创建",
        workstation: "质检工作站",
        taskSource: "计划任务",
        start: "2024-01-15",
        end: "2024-01-17",
        progress: 50
      },
      {
        id: 12,
        title: "包装入库",
        workOrderNo: "WO-2024-001-4",
        source: "系统创建",
        workstation: "包装工作站",
        taskSource: "计划任务",
        start: "2024-01-17",
        end: "2024-01-20",
        progress: 0
      }
    ]
  },
  {
    id: 2,
    title: "产品B生产工单",
    workOrderNo: "WO-2024-002",
    source: "手动创建",
    workstation: "生产线2",
    taskSource: "紧急任务",
    start: "2024-01-15",
    end: "2024-01-25",
    progress: 0,
    children: [
      {
        id: 21,
        title: "原料准备",
        workOrderNo: "WO-2024-002-1",
        source: "手动创建",
        workstation: "原料仓库",
        taskSource: "紧急任务",
        start: "2024-01-15",
        end: "2024-01-17",
        progress: 100
      },
      {
        id: 22,
        title: "组装工序",
        workOrderNo: "WO-2024-002-2",
        source: "手动创建",
        workstation: "组装工作站",
        taskSource: "紧急任务",
        start: "2024-01-17",
        end: "2024-01-20",
        progress: 30
      },
      {
        id: 23,
        title: "质检工序",
        workOrderNo: "WO-2024-002-3",
        source: "手动创建",
        workstation: "质检工作站",
        taskSource: "紧急任务",
        start: "2024-01-20",
        end: "2024-01-23",
        progress: 0
      },
      {
        id: 24,
        title: "包装入库",
        workOrderNo: "WO-2024-002-4",
        source: "手动创建",
        workstation: "包装工作站",
        taskSource: "紧急任务",
        start: "2024-01-23",
        end: "2024-01-25",
        progress: 0
      }
    ]
  }
];

// 左侧任务容器
const columns = [
  {
    field: "title", //指定表头字段
    title: "工单名称",//表头名称
    width: "auto",//宽度 auto自适应展示全部表头名称
    sort: true,//是否支持排序，也可以定义函数来指定排序规则
    tree: true,//该列是否为树形解构
    editor: "input",//配置该列单元格编辑器
    style: {
      fontSize: 14,
      color: "#1f2f3d",
      fontWeight: "bold"
    }
  },
  {
    field: "workOrderNo", // 工单编号字段
    title: "工单编号",
    width: "auto",
    sort: true,
    editor: "input", // 修改为普通输入框
    style: {
      fontSize: 13,
      color: "#303133"
    }
  },
  {
    field: "source", // 工单来源字段
    title: "工单来源",
    width: "auto",
    sort: true,
    editor: "select", // 修改为下拉选择框
    options: ["系统创建", "手动创建", "导入创建"], // 添加选项
    style: {
      fontSize: 13,
      color: "#303133"
    }
  },
  {
    field: "workstation", // 工作站字段
    title: "工作站",
    width: "auto",
    sort: true,
    editor: "select", // 修改为下拉选择框
    style: {
      fontSize: 13,
      color: "#303133"
    }
  },
  {
    field: "taskSource", // 任务来源字段
    title: "任务来源",
    width: "auto",
    sort: true,
    editor: "select", // 修改为下拉选择框
    options: ["计划任务", "临时任务", "紧急任务"],
    style: {
      fontSize: 13,
      color: "#303133"
    }
  },
  {
    field: "start", // 开始时间字段
    title: "开始时间",
    width: "auto",
    sort: true,
    editor: "date-input", // 日期输入框
    format: "YYYY-MM-DD HH:mm:ss", // 添加日期格式
    style: {
      fontSize: 13,
      color: "#303133"
    }
  },
  {
    field: "end", // 结束时间字段
    title: "结束时间",
    width: "auto",
    sort: true,
    editor: "date-input", // 日期输入框
    format: "YYYY-MM-DD HH:mm:ss", // 添加日期格式
    style: {
      fontSize: 13,
      color: "#303133"
    }
  },
];

const option = {
  overscrollBehavior: "none",
  records,
  // 左侧任务容器
  taskListTable: { 
    columns,
    theme:{
      
      // 表头样式
      headerStyle:{
        borderColor: '#e1e4e8',
        borderLineWidth: 1,
        fontSize: 12,
        fontWeight: 'bold',
        color: 'red',
        bgColor: '#EEF1F5'
      }
    }
   },
  taskBar: {
    startDateField: "start",
    endDateField: "end",
    progressField: "progress",
  },
  // 右侧时间轴
  timelineHeader: {
    colWidth: 100,
    backgroundColor: "#EEF1F5",

    horizontalLine: { lineWidth: 1, lineColor: "#e1e4e8" },
    verticalLine: { lineWidth: 1, lineColor: "red" },
    scales: [
      {
        unit: "day",
        step: 1,
        format(date) {
          return date.dateIndex.toString();
        },
        style: {
          fontSize: 12,
          fontWeight: "bold",
          color: "white",
          strokeColor: "black",
          textAlign: "right",
          textBaseline: "bottom",
          backgroundColor: "#EEF1F5",
        },
      },
    ],
  },
  scrollStyle: {
    scrollRailColor: 'RGBA(246,246,246,0.5)', // 滚动条轨道颜色
    visible: 'scrolling', // 仅滚动时可见
    width: 6, // 滚动条宽度
    scrollSliderCornerRadius: 2, // 滚动条圆角
    scrollSliderColor: '#5cb85c' // 滚动条颜色
  }
};

onMounted(() => {
  new Gantt(tableContainer.value, option);
});
</script>

<style lang="scss" scoped>
.gantt-container {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.gantt-card {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.gantt-table {
  width: 100%;
  height: 400px;
  min-width: 600px;
}
</style>

Current Behavior

Expected Behavior

修复问题

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response