如何在 Vue.js 中使用 rowspan 将指针事件应用于简单表？

Posted 2023-02-22

【中文标题】如何在 Vue.js 中使用 rowspan 将指针事件应用于简单表？

【英文标题】：How to apply pointer-events to simple-table using rowspan in Vue.js?

【发布时间】：2021-02-16 18:32:45

【问题描述】：

我在 Vuetify.js 框架中使用 v-simple-table 作为 Nuxt.js 制作了表格。 当我点击“XXX Inc.”时，我希望 HR、business、HR、sales 和 business 的表格单元格都被标记出来。 但现在只有第一行指向如下。

我的代码如下。 谁能给我建议？

    <template>
  <v-simple-table dense>
    <thead>
      <tr>
        <th>company</th>
        <th>division</th>
        <th>section</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="3">XX Inc.</td>
        <td>H/R</td>
        <td>H/R</td>
      </tr>
      <tr>
        <td rowspan="2">business</td>
        <td>sales</td>
      </tr>
      <tr>
        <td>marketing</td>
      </tr>
    </tbody>
  </v-simple-table>
</template>
<script lang="ts">
import  Component, Vue  from 'nuxt-property-decorator'

@Component()
export default class extends Vue 
</script>
<style lang="scss" scoped>
.v-data-table--dense > .v-data-table__wrapper > table > tbody > tr > td 
  border-bottom: thin solid rgba(0, 0, 0, 0.12) !important;

</style>

【问题讨论】：

那么当您点击“XXX inc”时，您希望HR、business、HR、sales 和business 的表格单元格都被标记出来吗？我理解正确吗？

抱歉回复晚了。这是正确的。很抱歉我不能很好地解释它。

【参考方案1】：

您可以使用 <tbody> 对“行”进行分组并添加 css：

tbody:hover tr 
    background-color: #eee;

见 demo 来自 vuetify 操场。

【讨论】：

先生.....这对我来说就像魔术！！！我真的很惊讶，真的很感激！！我必须学习css.....