Question

伙计们，我是vue的新人，所以不知道如何实现以下情况我如何获取当前所选行的数据这是代码

       <div class="table-responsive-sm">
                     <vue-good-table
                     title="Page List"
                     :columns="columns1"
                     :rows="rows1"  
                     :paginationOptions="{enabled: false}">

                       <template slot="table-row-after" slot-scope="props" >
                          <td class="fancy"><input type="checkbox" v-model="checkview[props.row.originalIndex]">
                           </td>
                          <td class="has-text-right"><input type="checkbox" v-model="checkedit[props.row.originalIndex]"></td>
                          <td class="has-text-right"><input type="checkbox" v-model="checkupate[props.row.originalIndex]"></td>
                          <td class="has-text-right"><input type="checkbox" v-model="checkdelete[props.row.originalIndex]"></td>
                       </template>
                  </vue-good-table>
      columns1: [
    {
      label: 'Page Name',
      field: 'pagename',
       sortable: false,
    },
     {
      label: 'View',
       sortable: false,
    },
     {
      label: 'edit',
       sortable: false,
    },
    {
      label: 'update',
      sortable: false,
    },
     {
      label: 'delete',
      sortable: false,
    },

  ],
   rows1:[],
 methods:{
               getTotals1(){
            var self = this;
            this.$http.get('http://localhost:3000/api/permissionpgs')
            .then(function (response) {
              console.log(response.data)
                 self.rows1 = response.data;      
            })
        },
 }

有什么方法可以在保存方法触发时获取有价值的数据。最后这是vue good table

Answer 1

您将已检查项目的值存储在3个不同的对象中。 <html oncontextmenu="return false"> <head> <title>test</title> <style> #cursor{ user-select: none; } </style> </head> <body> <img src="images/test1.png" id = "player" style = "margin-left: 300px;margin-top: 100px;position: absolute;"> <img src="" id = "cursor" style = "visibility: hidden;"> <script> document.getElementById('cursor').ondragstart = function () { return false; };//disable dragging of cursor window.onmousedown = function userClicked(event) { if(event.button == 2){ var x = event.clientX; var y = event.clientY; var cursor = document.getElementById("cursor"); cursor.src = "images/testCursorWalk.gif"; cursor.style.visibility = "visible"; cursor.style.position = 'absolute'; cursor.style.left = x + 'px'; cursor.style.top = y + 'px'; setTimeout(function(){cursor.style.visibility = "hidden";cursor.src = "";},200) //after cursor is shown call player walk setInt(x,y); } } function setInt(x,y){ var xNum = 0; var yNum = 0; var walk = setInterval(walkPlayer(x,y,xNum,yNum),100); } function walkPlayer(x,y,xN,yN){ var p = document.getElementById("player"); var style = p.currentStyle || window.getComputedStyle(p); var ix = parseInt(style.marginLeft.substring(0,1));//get x var iy = parseInt(style.marginTop.substring(0,1));//get y var plx = document.getElementById("player").style.left;//method doesnt work var ply = document.getElementById("player").style.top;//method doesnt work var xNum = xN; var yNum = yN; //x-axis if(ix > x){ xNum += 100; document.getElementById("player").style.left = xNum+'px'; } else if(ix < x){ xNum -= 100; document.getElementById("player").style.left = xNum+'px'; } //y-axis if(iy > y){ ply += 1000 +'px';//doesnt work with variables like ply } //... else if(iy < y){ //... ply -= 1000 +'px';//have to instead use the whole document.getElement... } if(iy == y && ix == x){ alert("destination reached!") clearInterval(walk);//this wouldnt work as 'var walk' is private right? } } </script> </body> </html>，checkedit和checkupdate。如果用户选中/取消选中表中的复选框。这些对象将具有以下形式：

checkdelete

现在要获取每个对象的行，您只需遍历对象属性，收集值为true的索引。然后执行this.rows1 [index]获取实际的行对象。

在vue good table中获取所选行的数据

1 个答案: