如何使整行可点击?

Posted

技术标签:

【中文标题】如何使整行可点击?【英文标题】:How to make the whole row clickable? 【发布时间】:2018-01-01 22:44:54 【问题描述】:

我正在使用 Vue 并且拥有:

<tr v-for="(blabla, index) in data">
  <td> blabla.id </td>
  <td> blabla.username </td>
  <td> blabla.name </td>
  <td>
    <router-link 
      :to=" name: 'name', params:  blabla: blabla.id  "
      class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
    >
      Details
    </router-link>                     
  </td>                    
</tr>

如何使整行都可点击,而不仅仅是具有路由器链接的按钮?

【问题讨论】:

这是否回答了您的问题:***.com/questions/17147821/… ? 不,我已经看过这个链接了 但是,您是否使用任何 JS 库,例如 JQuery?还是你根本用JS? 我正在使用 Vuejs,当我把它放在链接中时,你发送的所有 mdl 表设计都损坏了,我无法修复它:/ 【参考方案1】:

tr 和change the route programmatically 上添加点击监听器:

<tr v-for="(blabla, index) in data" @click="goToBlabla(blabla.id)">
  <td> blabla.id </td>
  <td> blabla.username </td>
  <td> blabla.name </td>
  <td>
    <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
      Details
    </a>                     
  </td>                    
</tr>
methods: 
  goToBlabla(id) 
    this.$router.push( name: 'name', params:  blabla: id  );
  


或者,您可以将v-for 放在&lt;router-link&gt; 上,并将tag 属性设置为tr

<router-link 
  v-for="(blabla, index) in data" 
  :to=" name: 'name', params:  blabla: blabla.id  "
  tag="tr"
>
  <td> blabla.id </td>
  <td> blabla.username </td>
  <td> blabla.name </td>
  <td>
    <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
      Details
    </a>                     
  </td>                    
</router-link>

将标签指定为tr 会将组件呈现为tr 元素。

【讨论】:

哇,我是 vuejs 的初学者,甚至不知道它的存在!非常感谢!!我会为此进行更多研究。 tag 属性添加到您的&lt;router-link&gt; 不会使其可点击,它只能让您将active 类应用于&lt;a&gt; 标记的外部元素(documentation )。 标签属性已在 vue router 4 insted 中被弃用 custom 标签

以上是关于如何使整行可点击?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 SwiftUI List 中制作整行可触摸区域?

如何使整行列表视图可点击?

Jquery Datatables - 使整行成为链接

使检票口数据表的整行可点击

如何禁用 SwiftUI 的默认行为?

如何使表格行可点击并展开行 - vue.js - element-ui