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

如何实施？

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>

Answer 2

您也可以使用VueJS来做到这一点，

<div id="app">
     <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"  @mouseover="showButtonFunction(row.id)"  @mouseleave="hideButtonFunction" :key="row.id">
           <td>{{row.id}}</td>
           <td>{{row.text}}<button v-show="buttonIndex === row.id">Test</button></td>
           <td>{{row.date_current}}</td>
           <td><button v-show="buttonIndex === row.id">Test</button></td>
         </tr>
       </tbody>
  </table>
</div>

JS代码：

var vue = new Vue({
    el: '#app',
    data:{
     buttonIndex: false,
      tasks: [
        {
          id: 1,
          text: "Hello",
          date_current: new Date()
        },
        {
          id: 2,
          text: "Hello2",
          date_current: new Date()
        },
        {
          id: 3,
          text: "Hello3",
          date_current: new Date()
        }
      ]
    },
    methods:{
    showButtonFunction(id){
    // this.title="dsds2"
    this.buttonIndex=id;
  },
  hideButtonFunction(){
    this.buttonIndex=false;
  }
    }
})

检查this Link：）

在一行表上显示按钮

2 个答案: