javascript - 在一行表上显示按钮

Question

我有表：

   <table class="table table-condensed">
            <thead>
            <tr>
                <th>id</th>
                <th>task</th>
                <th>date</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="row in tasks">

                <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.id}}</td>
                <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">   {{row.text}}<button v-if="showBatton">Test</button></td>
                <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.date_current}}</td>
                <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction"><button v-if="showBatton">Test</button></td>
            </tr>
            </tbody>
        </table>

正如预期的那样，按钮应该出现在鼠标悬停的行上。但现在它出现在所有可见的线上。

脚本：

  data:{
 showBatton:false,
},
  showButtonFunction(){
                   // this.title="dsds2"
                    console.log("test")
                    this.showBatton=true;
                },
                hideButtonFunction(){
                    this.showBatton=false;
                }

如何实施？

标签： javascriptvue.jshtml-table

Answer 1

您只能使用 css 执行此操作：

// CSS
tr button {
  display: none;
}

tr:hover button {
  display: inline-block;
}

// HTML
<tr v-for="row in tasks">
  <td span>{{row.id}}</td>
  <td span>{{row.text}}<button>Test</button></td>
  <td span>{{row.date_current}}</td>
  <td span><button>Test</button></td>
</tr>