正文 

当前位置： 首页 > 问答 >

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

     2023-02-22     192

关键词：

【中文标题】如何在 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】：

您可以使用 &lt;tbody&gt; 对“行”进行分组并添加 css：

tbody:hover tr 
    background-color: #eee;

见 demo 来自 vuetify 操场。

【讨论】：

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

如何在 HTML 表格中使用 colspan 和 rowspan？

】如何在HTML表格中使用colspan和rowspan？【英文标题】：HowdoyouusecolspanandrowspaninHTMLtables?【发布时间】：2012-04-0711:59:48【问题描述】：我不知道如何合并HTML表格中的行和列。您能帮我用HTML制作这样的表格吗？【问题讨论】：合并... 查看详情

如何在 JQuery 数据表中添加 Rowspan

】如何在JQuery数据表中添加Rowspan【英文标题】：HowtoaddRowspaninJQuerydatatables【发布时间】：2015-11-1208:24:15【问题描述】：我正在使用Jquery数据表来构建一个表。我的要求如下这不是静态表，我们使用json数据渲染它。我在这里，使... 查看详情

如何使用 datatable.js 在 tbody 中使用 rowspan 和 colspan？

】如何使用datatable.js在tbody中使用rowspan和colspan？【英文标题】：Howtouserowspanandcolspanintbodyusingdatatable.js?【发布时间】：2015-02-0203:15:42【问题描述】：每当我使用&lt;tdcolspan="x"&gt;&lt;/td&gt;时，我都会收到以下错... 查看详情

Vue.JS - 如何在 Vue.JS 中使用 localStorage

】Vue.JS-如何在Vue.JS中使用localStorage【英文标题】：Vue.JS-howtouselocalStoragewithVue.JS【发布时间】：2017-05-1612:07:22【问题描述】：我正在使用Vue.JS开发Markdown编辑器，我尝试使用localStorage来保存数据，但我不知道如何在用户键入时将... 查看详情

如何在 Vue.js 中使用 MaterializeCss？

】如何在Vue.js中使用MaterializeCss？【英文标题】：HowtouseMaterializeCsswithVue.js?【发布时间】：2019-03-2821:47:13【问题描述】：我不想使用Vue-Material也不想使用Vuetify。我想使用Materialize。我要做的是：npminstallmaterialize-css@next在定义我的... 查看详情

如何在 Vue.js 3 中使用 Vue 3 Meta？

】如何在Vue.js3中使用Vue3Meta？【英文标题】：HowtouseVue3MetawithVue.js3?【发布时间】：2021-05-1912:55:42【问题描述】：VueMeta似乎已升级为使用名为vue-3-meta的新npm包来处理Vue.js3在Vue.js3之前，通过将vue-meta添加到Vue实例中很容易使用：im... 查看详情

如何在 vue.js 中使用 html 模板

】如何在vue.js中使用html模板【英文标题】：Howtousehtmltemplatewithvue.js【发布时间】：2017-07-2819:07:16【问题描述】：我只是想尝试使用vue.js，但是当我尝试使用我购买的模板时遇到了麻烦。我已经将所有.css和.js文件放入index.html中，... 查看详情

如何使用 Vue.js 在变量中渲染模板？

】如何使用Vue.js在变量中渲染模板？【英文标题】：HowcanIrendertemplateinavariablewithVue.js?【发布时间】：2016-06-0603:38:16【问题描述】：在mustache.js中，templatescanbepassedasanargumentofMustache.render()asfollows:varview=title:"Joe",calc:function()return2+ 查看详情

如何在 Vue.js 中使用 dotenv

】如何在Vue.js中使用dotenv【英文标题】：HowtousedotenvwithVue.js【发布时间】：2018-11-1520:07:28【问题描述】：我正在尝试将一些环境变量添加到我的vue应用中。这是我的.env文件的内容，它位于根目录（src之外）：VUE_APP_GOODREADS_KEY=my_k... 查看详情

如何在 vue.js 模板中使用 annotorious

】如何在vue.js模板中使用annotorious【英文标题】：Howtouseannotoriousinvue.jstemplate【发布时间】：2021-07-1915:11:23【问题描述】：我想在vue.js(vue3)模板中使用annotorious（带有openseadragon插件）。我已经用npm安装了annotorious。这是我到目前为... 查看详情

如何在 Vue.js 插槽中使用条件渲染？

】如何在Vue.js插槽中使用条件渲染？【英文标题】：HowtouseconditionalrenderingwithVue.jsslots?【发布时间】：2020-11-1523:51:37【问题描述】：如何使用v-if的结果在Vue中渲染两个不同的组件？如果重要的话，我也在尝试使用v-for渲染TreeView... 查看详情

如何在 Vue.js 中使用 BigQuery API

】如何在Vue.js中使用BigQueryAPI【英文标题】：HowtouseBigQueryAPIinVue.js【发布时间】：2020-01-2620:08:13【问题描述】：我是Vue.js的新手，但我已经使用axios构建了一些基本的CRUD应用程序。我想做的是使用GoogleCloudBigQuery提取原始数据，然... 查看详情

如何在 Vue.js 中使用图像作为按钮？

】如何在Vue.js中使用图像作为按钮？【英文标题】：HowtouseanimageasabuttoninVue.js?【发布时间】：2019-10-2416:32:48【问题描述】：我正在尝试将登录按钮作为Vue.js中的单个文件组件（它是一个带有Vue.js前端的Rails应用程序）。如果您单... 查看详情

如何在 Vue.js 的联合中使用片段？

】如何在Vue.js的联合中使用片段？【英文标题】：HowdoIusefragmentsonunioninVue.js?【发布时间】：2019-11-0502:02:59【问题描述】：有人知道如何在联合上使用片段吗？我看过React(https://www.apollographql.com/docs/react/advanced/fragments/#fragments-on-uni... 查看详情

如何在 laravel Blade 中使用 vue.js 组件？

】如何在laravelBlade中使用vue.js组件？【英文标题】：Howtousevue.jscomponentinlaravelblade?【发布时间】：2018-02-1416:09:09【问题描述】：我像这样在app.js中注册了组件：Vue.component(\'navbar\',require(\'./components/Navbar.vue\'));现在我想导入那个组... 查看详情

如何在 Vue.js 开发环境中使用相对路径

】如何在Vue.js开发环境中使用相对路径【英文标题】：HowtouserelativepathsinVue.jsdevenvironment【发布时间】：2021-10-2708:44:50【问题描述】：我在laravel/vue.js项目的开发和生产环境中遇到了路径问题。在CSS文件中：开发环境npmrunhot只接受... 查看详情

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】：Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】：2017-10-2807:01:42【问题描述】：我在Nuxt.js(Vue.js)中开发网络应用程序首先，vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情

如何在 Vue.js 中使用 async/await？

】如何在Vue.js中使用async/await？【英文标题】：Howtouseasync/awaitinVue.js?【发布时间】：2019-07-2402:58:00【问题描述】：我是ES7新手我想在Vue.js中使用async/await这是我的代码created()this.getA()console.log(2)this.getB(),methods:getA()console.log(1),getB()c... 查看详情