VTable
VTable copied to clipboard
VisActor
[Bug] 为什么会有一个线
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
那你建一个codesanbox复现环境吧 我具体看看 因为拿你配置是复现不出来的 @sjh612
https://codesandbox.io/p/devbox/hopeful-leakey-76mgfw 已经复现出来
那你建一个codesanbox复现环境吧 我具体看看 因为拿你配置是复现不出来的 @sjh612
https://codesandbox.io/p/devbox/hopeful-leakey-76mgfw 已经复现出来
给容器增加了position: relative;规避了这个问题，感觉那根拖拽线的定位有问题
