How to get selected rows' index in Table element in iview vue?

3k Views Asked by At

How to get selected rows' index in Table element in iview vue? For example, table element is like below:

<Table ref="selection" :columns="columns4" :data="data1" @on-selection-change="updateSelectedNumber"></Table>
2

There are 2 best solutions below

5
Hamilton Gabriel On BEST ANSWER

GET data rows item clicked. To get the index of the item clicked, simply click on the line you want, not above the checkbox, over the item that is not the box, but that is on the same line.

add this tag

methods: {
 valueRowClick(value)
 console.log(value)
}
result:
position: 0 -> Object 
position 1: -> Index item clicked 2

When you select an item, according to the documentation it throws the value of the selected items out. GET data item select

<table @on-select="nameFunction">
methods: {
 nameFunction (value) {
 console.log(value)
}
}

DELETE ITEM EXAMPLE: add the this tag TABLE

<table @on-selection-change="valueItemsSelected"></table>
methods: {
    valueItemsSelected(value){
      if(value.length > 0){
       for(let y = 0, max1 = value.length; y < max1; y ++){
         for(let i = 0, max = this.data1.length; i < max; i++){
          if(value[y] === this.data1[i])    {
           this.data1.splice(i, 1)
          }
         }
        }
      }
    }
  },
0
mactanxin On

In your HTML template as <Table :columns="myColumns" :data="myData" /> do nothing.

In your <script>, when you click on a row, you can get a params object to your function, with data structure like this:

{
  row : {...}
  index : 0 // or maybe the actual row index,
  column: {...}
}

rowClicked(params.index) {
  let rowIndex = params.index;
}