Open
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: {
createReactContaine
58EB
r: 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