Question

我想在表格主体的特定行中显示图标以删除该行。我搜索了解决方案但尝试了但是进展不顺利。

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

下面的代码是我正在处理的简单版本。我希望有人知道解决方案。

<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>

Answer 1

您需要使用onmouseenter和onmouseleave来执行隐藏和显示删除。你不需要父文件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

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

1 个答案: