如何显示图标在表的特定行与onmouseover与Riot.js

How to show icon in specific row in table with onmouseover with Riot.js

本文关键字：onmouseover js Riot 何显示 显示 图标      更新时间：2023-09-26

我想在表主体的特定行中显示图标以删除该行。我寻找解决方案并尝试了，但效果不太好。

在所有行中显示图标很容易，但仅在特定行中显示图标却很困难。

下面的代码是我正在工作的简单版本。我希望有人知道解决办法。

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Category</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr each={ article in articles } onmouseover={ onMouseOver }>
            <td>{ article.title }<i class='fa fa-trash-o' aria-hidden='true' show={ parent.showTrash }></i></td>
            <td>{ article.category }</td>
            <td>{ article.date }</td>
        </tr>
    </tbody>
</table>
<script>
this.articles = [
    {title: 'This is How Japanese Makeup' date: 'Oct 7 2016',  category:'Makeup'},
    {title: 'This is Japanese Fashion' date: 'Oct 8 2016',  category:'Fashion'},
    {title: 'This is Japanese Food' date: 'Oct 9 2016',  category:'Food'}
]
onMouseOver(e) {
    e.item.article.showTrash = true
}
</script>

您需要使用onmouseenter和onmouseleave来执行Delete的隐藏和显示。您不需要父show={ parent.showTrash }，只需要文章，并且您在文章数组中遗漏了一个逗号。下面是代码

  <table>
      <thead>
          <tr>
              <th>Title</th>
              <th>Category</th>
              <th>Date</th>
          </tr>
      </thead>
      <tbody>
          <tr each={ article in articles } onmouseleave={offTrash} onmouseenter={ onTrash }>
              <td>{ article.title }<i class='fa fa-trash-o' aria-hidden='true' show={article.showTrash}> X </i></td>
              <td>{ article.category }</td>
              <td>{ article.date }</td>
          </tr>
      </tbody>
  </table>
  <script>
  this.articles = [
      {title: 'This is How Japanese Makeup', date: 'Oct 7 2016',  category:'Makeup'},
      {title: 'This is Japanese Fashion', date: 'Oct 8 2016',  category:'Fashion'},
      {title: 'This is Japanese Food', date: 'Oct 9 2016',  category:'Food'}
  ]
  onTrash(e) {
      e.item.article.showTrash = true
  }
  offTrash(e) {
      e.item.article.showTrash = false
  }  
  </script>

在线版本:http://plnkr.co/edit/3lmsWA0RZ0zLERXQDdTr?p=preview

相关文章：