怎么穿透上面Dom,触发底层的Dom元素的事件

Question

我的表格中的数据, 是把原数据,
通过 slice()函数 切片,达到分页显示效果

由于表格的行数是固定的,这样就没法, 在table 的样式中, 没法设置 overflow-y:auto 这种滚动条
于是,
另外做了一个滚动条 的子组件 ScrollVue,

问题描述
为了可以在table中任意位置触发滚动事件, 滚动条子组件ScrollVue宽度设置成100% 等同table宽度 :
但是由于, 子组件ScrollVue 在z-index 在最上层 ,
table td中的其它鼠标事件就没法触发了,td 中的 input都没法得到焦点

     求解答

<table>
   
        <ScrollVue  />   // 滚动条 的子组件 是 position定位,width:100%
<thead>
</thead>
<tbody>
<tbody>

</table>



  // 滚动条 的子组件 ScrollVue  
<template>
    <div ref='scrolldivRef' id='scroll-div' @scroll="scrollMove($event)" :style="{ 'height': rows * 26  + 'px', }"
        v-if="dataLength > rows">
        <div class="scroll-children" :style="{
            'height': dataLength * 26 + 'px',
            // 'top': scrollBlockTop + 'px',
        }" @mousedown="">
        </div>
    </div>
</template>

Answer 1

参考GPT的内容和自己的思路，您可以尝试使用CSS的pointer-events属性来解决此问题。pointer-events属性允许您控制元素是否可以触发鼠标事件。

在您的CSS文件中，为滚动条的子组件添加以下样式：

.scroll-children {
  pointer-events: none;
}

这将使滚动条的子组件不会触发任何鼠标事件，而是将它们传递到下面的元素。然后，您可以为每个需要触发鼠标事件的单元格添加以下样式：

td {
  pointer-events: auto;
}

这将允许每个单元格触发鼠标事件，而不受滚动条子组件的影响。请注意，如果您想在td元素内部的子元素上触发鼠标事件，您也需要为这些子元素添加pointer-events: auto样式。
以下是我修改后的代码：

// 滚动条的子组件 ScrollVue
<template>
  <div
    ref="scrolldivRef"
    id="scroll-div"
    @scroll="scrollMove($event)"
    :style="{ height: rows * 26 + 'px' }"
    v-if="dataLength > rows"
  >
    <div
      class="scroll-children"
      :style="{ height: dataLength * 26 + 'px' }"
      @mousedown=""
    ></div>
  </div>
</template>

<script>
export default {
  name: "ScrollVue",
  props: {
    rows: {
      type: Number,
      default: 10,
    },
    dataLength: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    scrollMove(e) {
      // do something
    },
  },
};
</script>

<style>
.scroll-children {
  pointer-events: none;
}
td {
  pointer-events: auto;
}
</style>

// 在您的模板中，使用 table、thead、tbody 和 tr 元素来创建表格
<table>
  <ScrollVue />
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" placeholder="Input 1" /></td>
      <td><input type="text" placeholder="Input 2" /></td>
      <td><input type="text" placeholder="Input 3" /></td>
    </tr>
    <tr>
      <td><input type="text" placeholder="Input 1" /></td>
      <td><input type="text" placeholder="Input 2" /></td>
      <td><input type="text" placeholder="Input 3" /></td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>

请注意，我在样式表中添加了两个规则：.scroll-children 和 td。第一个规则将滚动条子组件的指针事件设置为“none”，因此它不会干扰表格中单元格的事件。第二个规则将所有单元格的指针事件设置为“auto”，这样它们就可以触发鼠标事件了。如果您需要在某些特定的单元格内部禁用鼠标事件，请将它们的pointer-events属性设置为“none”。

回答不易，还请采纳！！！