[BUG]列组件中最后一个显示不出内容

Question

[BUG]列组件中最后一个显示不出内容

Closed this issue 6 months ago · 8 comments

问题：

同一串代码，在两个项目中跑，效果不一致，一个正常展示，一个最后一列不展示，超过一列最后一列就有问题

代码如下：

用户管理系统开发甘特图

Answer 1 · 2024-10-09T12:50:01.000Z

gukunruo commented 6 months ago

Answer 2 · 2024-10-09T13:24:48.000Z

有时间我看看……应该是跑下面去了。宽度问题

Answer 3 · 2024-10-09T13:32:47.000Z

有时间我看看……应该是跑下面去了。宽度问题

哥，能不能早些时间看看，我这在用这个组件，现在数据不展示出来，影响进度，求求哥了！

Answer 4 · 2024-10-09T16:18:13.000Z

把出问题的代码整理一下给我，我找时间看看

Answer 5 · 2024-10-10T01:55:40.000Z

把出问题的代码整理一下给我，我找时间看看

<script setup>
import { computed, reactive, ref } from 'vue';

import { XGantt, XGanttColumn, XGanttSlider } from '@xpyjs/gantt';
import { message } from 'ant-design-vue';

import '@xpyjs/gantt/dist/index.css';

const unit = ref('day'); // month、week、day、hour

const themeColor = ref('#cfd8f5');

const currentDate = new Date();
currentDate.setHours(0, 0, 0, 0); // 设置时间为0点

const dataList = reactive([
  // {
  //   endDate: currentDate.setDate(30),
  //   id: 'project',
  //   name: '用户管理系统开发',
  //   requirement: '用户管理系统',
  //   startDate: currentDate.setDate(1),
  //   children: [
  {
    id: 'product',
    name: '产品',
    requirement: '用户管理系统',
    responsible: '',
    children: [
      {
        id: 'product-1',
        name: '需求分析',
        startDate: currentDate.setDate(1),
        endDate: currentDate.setDate(5),
        requirement: '用户管理系统',
        subRequirement: '需求文档',
        responsible: '张三1',
        participant: '张三11',
        o: { t1: 'task-product-1', t2: 'task-product-3' },
      },
      {
        id: 'product-2',
        name: '产品设计',
        startDate: currentDate.setDate(6),
        endDate: currentDate.setDate(10),
        requirement: '用户管理系统',
        subRequirement: '产品原型',
        responsible: '张三2',
        participant: '张三22',
        o: { t1: 'task-product-2' },
      },
    ],
  },
  {
    id: 'ui',
    name: 'UI设计',
    requirement: '用户管理系统',
    children: [
      {
        id: 'ui-1',
        name: '界面设计',
        startDate: currentDate.setDate(6),
        endDate: currentDate.setDate(15),
        requirement: '用户管理系统',
        subRequirement: 'UI设计稿',
        responsible: '李四1',
        participant: '李四11',
        o: { t1: 'task-ui-1' },
      },
    ],
  },
  {
    id: 'frontend',
    name: '前端开发',
    requirement: '用户管理系统',
    children: [
      {
        id: 'frontend-1',
        name: '登录页面开发',
        startDate: currentDate.setDate(11),
        endDate: currentDate.setDate(20),
        requirement: '用户管理系统',
        subRequirement: '登录功能',
        responsible: '王五1',
        participant: '王五11',
        o: { t1: 'task-frontend-1' },
      },
      {
        id: 'frontend-2',
        name: '用户列表页面开发',
        startDate: currentDate.setDate(16),
        endDate: currentDate.setDate(25),
        requirement: '用户管理系统',
        subRequirement: '用户列表',
        responsible: '赵六1',
        participant: '赵六11',
        o: { t1: 'task-frontend-2' },
      },
    ],
  },
  {
    id: 'backend',
    name: '服务端开发',
    requirement: '用户管理系统',
    children: [
      {
        id: 'backend-1',
        name: 'API开发',
        startDate: currentDate.setDate(11),
        endDate: currentDate.setDate(25),
        requirement: '用户管理系统',
        subRequirement: '后端API',
        responsible: '钱七1',
        participant: '钱七11',
        o: { t1: 'task-backend-1' },
      },
    ],
  },
  {
    id: 'testing',
    name: '测试',
    requirement: '用户管理系统',
    children: [
      {
        id: 'testing-1',
        name: '功能测试',
        startDate: currentDate.setDate(26),
        endDate: currentDate.setDate(30),
        requirement: '用户管理系统',
        subRequirement: '系统测试',
        responsible: '孙八1',
        participant: '孙八11',
        o: { t1: 'task-testing-1' },
      },
    ],
  },
  //   ],
  // },
]);

// 计算数据的最大深度
const maxDepth = computed(() => {
  let maxDepth = 0;
  const stack = dataList.map((item) => ({ depth: 1, item }));

  while (stack.length > 0) {
    const { depth, item } = stack.pop();
    maxDepth = Math.max(maxDepth, depth);

    if (item.children && item.children.length > 0) {
      stack.push(
        ...item.children.map((child) => ({ depth: depth + 1, item: child })),
      );
    }
  }

  return maxDepth;
});

const getParticipant = (row) => {
  // const a = row.participant || '';
  // debugger;
  // 方案：隐藏父层级的参与人员
  return row.participant || '';

  // 方案：展示父层级参与人员
  // if (row.participant) {
  //   return row.participant;
  // }
  // if (row.participants && row.participants.length > 0) {
  //   return row.participants.join(',');
  // }
  // return '';
};

const handleRowClick = (row) => {
  console.log(row);
};
const handleRowDoubleClick = (row) => {
  console.log(row);
};
const handleSliderClick = (row) => {
  message.info('点击了滑块');
  console.log(row);
};
</script>
<!-- https://xpyjs.github.io/gantt/docs/root.html#move-slider 使用文档 -->
<template>
  <div>
    <h1>用户管理系统开发甘特图</h1>
    <XGantt
      :data="dataList"
      :primary-color="themeColor"
      :unit="unit"
      data-id="id"
      highlight-date
      locale="zh"
      row-height="45"
      show-today
      show-weekend
      @row-click="handleRowClick"
      @row-dbl-click="handleRowDoubleClick"
    >
      <XGanttColumn empty-data="" label="角色" prop="name" width="180" />
      <XGanttColumn
        v-if="maxDepth <= 2"
        empty-data=""
        label="需求"
        prop="requirement"
        width="120"
      />
      <XGanttColumn v-else empty-data="" label="需求">
        <XGanttColumn
          empty-data=""
          label="需求"
          prop="requirement"
          width="120"
        />
        <XGanttColumn
          empty-data=""
          label="子需求"
          prop="subRequirement"
          width="120"
        />
      </XGanttColumn>
      <XGanttColumn
        empty-data=""
        label="负责人"
        prop="responsible"
        width="100"
      />
      <XGanttColumn
        empty-data=""
        label="参与人员"
        prop="participant"
        width="100"
      >
        <template #default="{ row }">
          {{ getParticipant(row) }}
        </template>
      </XGanttColumn>
      <XGanttSlider
        :allow-link="false"
        :bg-color="themeColor"
        empty-data=""
        height="80%"
        linked-resize
        move
        move-by-unit
        prop="o.t1"
        resize-left
        resize-right
        @click="handleSliderClick"
      >
        <template #default="{ row }">
          <div style="height: 100%; line-height: normal; color: #fff">
            {{ row.name }}
          </div>
        </template>
      </XGanttSlider>
    </XGantt>
  </div>
</template>

<style scoped></style>

Answer 6 · 2024-10-10T02:34:07.000Z

把出问题的代码整理一下给我，我找时间看看

找到问题了，后面博主修复下吧，最后一列数据由于宽度被挤下去了，所以不展示了，box-sizing改成content-box就OK了

Answer 7 · 2024-10-10T16:22:19.000Z

我把你的代码直接贴过来，正常的呀。。。我再看看吧。。。

这不是一个 content-box 的问题。border-box 就是为了避免这个问题。

Answer 8 · 2024-10-12T10:14:45.000Z

update to v2.1.14 试一下吧。我试了3个浏览器，没有啥问题。。。