VisActor / VisActor/VTable

[Bug] 在vue-vtable中自定义单元格中需要鼠标交互,手动开启 pointer-events后,竖向滚动表格列表受阻

Open
#4,171 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
3.7k
Forks
486
Avg merge
1d 19h
Merged PRs (30d)
16

Description

Version

1.19.2

Link to Minimal Reproduction

https://visactor.io/vtable/demo-vue/custom-layout/cell-dom-component

Steps to Reproduce

我根据以下文档链接开启鼠标交互,发现鼠标悬浮在开启pointer-events:auto的单元格上是无法往下滚动列表的。
单元格渲染 DOM 组件:https://visactor.io/vtable/demo-vue/custom-layout/cell-dom-component
可复制以下代码复现bug,并将鼠标移入至name列

//在代码演示中,我们展示了如何在表格中渲染自定义的 Vue 组件。具体包括:
//- **性别列**:通过 `ArcoDesignVue.Tag` 组件来渲染性别表头信息。
//- **评论列**:通过 `ArcoDesignVue.Comment` 组件来渲染评论信息,并包含点赞、收藏、回复等操作按钮。

const app = createApp({
  template: `
   <vue-list-table :options="option" :records="records" ref="tableRef">
    <ListColumn field="name" title="姓名" width="200" >
      <template #customLayout="{ width, height, record }">
        <Group :width="width" :height="height" display="flex" align-items="center" :vue="{}">
          <span style="cursor: pointer; pointer-events: auto">{{record.name}}</span>
        </Group>
      </template>
    </ListColumn>
    <ListColumn field="age" title="年龄" width="150" />
    <ListColumn field="city" title="城市" width="150" />
    <ListColumn field="gender" title="性别" width="100">
      <template #headerCustomLayout="{ width, height }">
        <Group :width="width" :height="height" display="flex" align-items="center" :vue="{}">
          <ATag color="green"> 性别 </ATag>
        </Group>
      </template>
    </ListColumn>
    <ListColumn field="comment" title="评论" width="300">
      <template #customLayout="{ width, height, record }">
        <Group :width="width" :height="height" display="flex" align-items="center" :vue="{}">
          <AComment author="Socrates" :content="record['comment']" datetime="1 hour">
            <template #actions>
              <span key="heart" style="cursor: pointer; pointer-events: auto">
                {{ 83 }}
              </span>
              <span key="star" style="cursor: pointer; pointer-events: auto">
                {{ 3 }}
              </span>
              <span key="reply" style="cursor: pointer; pointer-events: auto"> Reply </span>
            </template>
            <template #avatar>
              <AAvatar>
                <img
                  alt="avatar"
                  src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
                />
              </AAvatar>
            </template>
          </AComment>
        </Group>
      </template>
    </ListColumn>
  </vue-list-table>
  `,
  data() {
    return {
      tableRef: ref(null),
      option: {
        records: [
          { gender: '男', name: '张三张三张三张三', age: 20, city: '北京' },
          { gender: '女', name: '李四李四李四李四', age: 21, city: '上海' },
          { gender: '男', name: '王五王五王五王五', age: 22, city: '广州' },
          { gender: '女', name: '赵六赵六赵六赵六', age: 23, city: '深圳' },
          { gender: '男', name: '孙七孙七孙七孙七', age: 24, city: '成都' },
          { gender: '女', name: '周八周八周八周八', age: 25, city: '重庆' },
          { gender: '男', name: '吴九吴九吴九吴九', age: 26, city: '西安' },
          { gender: '男', name: '张三张三张三张三', age: 20, city: '北京' },
          { gender: '女', name: '李四李四李四李四', age: 21, city: '上海' },
          { gender: '男', name: '王五王五王五王五', age: 22, city: '广州' },
          { gender: '女', name: '赵六赵六赵六赵六', age: 23, city: '深圳' },
          { gender: '男', name: '孙七孙七孙七孙七', age: 24, city: '成都' },
          { gender: '女', name: '周八周八周八周八', age: 25, city: '重庆' },
          { gender: '男', name: '吴九吴九吴九吴九', age: 26, city: '西安' },
          { gender: '男', name: '张三张三张三张三', age: 20, city: '北京' },
          { gender: '女', name: '李四李四李四李四', age: 21, city: '上海' },
          { gender: '男', name: '王五王五王五王五', age: 22, city: '广州' },
          { gender: '女', name: '赵六赵六赵六赵六', age: 23, city: '深圳' },
          { gender: '男', name: '孙七孙七孙七孙七', age: 24, city: '成都' },
          { gender: '女', name: '周八周八周八周八', age: 25, city: '重庆' },
          { gender: '男', name: '吴九吴九吴九吴九', age: 26, city: '西安' },
          { gender: '男', name: '张三张三张三张三', age: 20, city: '北京' },
          { gender: '女', name: '李四李四李四李四', age: 21, city: '上海' },
          { gender: '男', name: '王五王五王五王五', age: 22, city: '广州' },
          { gender: '女', name: '赵六赵六赵六赵六', age: 23, city: '深圳' },
          { gender: '男', name: '孙七孙七孙七孙七', age: 24, city: '成都' },
          { gender: '女', name: '周八周八周八周八', age: 25, city: '重庆' },
          { gender: '男', name: '吴九吴九吴九吴九', age: 26, city: '西安' },
          { gender: '男', name: '张三张三张三张三', age: 20, city: '北京' },
          { gender: '女', name: '李四李四李四李四', age: 21, city: '上海' },
          { gender: '男', name: '王五王五王五王五', age: 22, city: '广州' },
          { gender: '女', name: '赵六赵六赵六赵六', age: 23, city: '深圳' },
          { gender: '男', name: '孙七孙七孙七孙七', age: 24, city: '成都' },
          { gender: '女', name: '周八周八周八周八', age: 25, city: '重庆' },
          { gender: '男', name: '吴九吴九吴九吴九', age: 26, city: '西安' },
          { gender: '男', name: '张三张三张三张三', age: 20, city: '北京' },
          { gender: '女', name: '李四李四李四李四', age: 21, city: '上海' },
          { gender: '男', name: '王五王五王五王五', age: 22, city: '广州' },
          { gender: '女', name: '赵六赵六赵六赵六', age: 23, city: '深圳' },
          { gender: '男', name: '孙七孙七孙七孙七', age: 24, city: '成都' },
          { gender: '女', name: '周八周八周八周八', age: 25, city: '重庆' },
          { gender: '男', name: '吴九吴九吴九吴九', age: 26, city: '西安' },
          { gender: '男', name: '张三张三张三张三', age: 20, city: '北京' },
          { gender: '女', name: '李四李四李四李四', age: 21, city: '上海' },
          { gender: '男', name: '王五王五王五王五', age: 22, city: '广州' },
          { gender: '女', name: '赵六赵六赵六赵六', age: 23, city: '深圳' },
          { gender: '男', name: '孙七孙七孙七孙七', age: 24, city: '成都' },
          { gender: '女', name: '周八周八周八周八', age: 25, city: '重庆' },
          { gender: '男', name: '吴九吴九吴九吴九', age: 26, city: '西安' },
          { gender: '男', name: '张三张三张三张三', age: 20, city: '北京' },
          { gender: '女', name: '李四李四李四李四', age: 21, city: '上海' },
          { gender: '男', name: '王五王五王五王五', age: 22, city: '广州' },
          { gender: '女', name: '赵六赵六赵六赵六', age: 23, city: '深圳' },
          { gender: '男', name: '孙七孙七孙七孙七', age: 24, city: '成都' },
          { gender: '女', name: '周八周八周八周八', age: 25, city: '重庆' },
          { gender: '男', name: '吴九吴九吴九吴九', age: 26, city: '西安' },
          { gender: '男', name: '张三张三张三张三', age: 20, city: '北京' },
          { gender: '女', name: '李四李四李四李四', age: 21, city: '上海' },
          { gender: '男', name: '王五王五王五王五', age: 22, city: '广州' },
          { gender: '女', name: '赵六赵六赵六赵六', age: 23, city: '深圳' },
          { gender: '男', name: '孙七孙七孙七孙七', age: 24, city: '成都' },
          { gender: '女', name: '周八周八周八周八', age: 25, city: '重庆' },
          { gender: '男', name: '吴九吴九吴九吴九', age: 26, city: '西安' },
        ],
        defaultHeaderRowHeight: 40,
        defaultRowHeight: 40,
        customConfig: {
          createReactContainer: true
        }
      }
    };
  }
});

app.component('vue-list-table', VueVTable.ListTable);
app.component('ListColumn', VueVTable.ListColumn);
app.component('Group', VueVTable.Group);
app.component('ATag', ArcoDesignVue.Tag);
app.component('AComment', ArcoDesignVue.Comment);
app.component('AAvatar', ArcoDesignVue.Avatar);

app.mount(`#${CONTAINER_ID}`);

// release Vue instance, do not copy
window.customRelease = () => {
  app.unmount();
};
Current Behavior

在vue-vtable中自定义单元格中需要鼠标交互,手动开启 pointer-events后,无法正常向下滚动表格列表

Expected Behavior

在vue-vtable中自定义单元格中需要鼠标交互,手动开启 pointer-events后,应当可以正常向下滚动表格列表

Environment
- OS:
- Browser:
- Framework:
Any additional comments?

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Vue custom-layout/cell-dom-component reproduction and the provided VueVTable.ListTable example, focusing on pointer-events:auto in custom cells and vertical scrolling. Reproduce the issue with the pointer over the name or comment cells, then trace the relevant scroll and custom-cell event handling. Done means custom cell interactions remain available while vertical table scrolling works normally.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.