Показать кнопку в одной строке таблицы - PullRequest
Новая
       7

Показать кнопку в одной строке таблицы

0 голосов
/ 13 октября 2018

У меня есть таблица: 

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

Как это реализовать?

Ответы [ 2 ]

0 голосов
/ 13 октября 2018

Вы можете сделать это, используя 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;
  }
    }
})

Проверьте эту ссылку :)

0 голосов
/ 13 октября 2018

Вы можете сделать это только с помощью 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>
...