如何在iview vue中的Table元素中获取选定行的索引？

Question

如何获取iview vue中Table元素中选中行的索引？例如，table 元素如下所示：

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

Answer 1

已单击获取数据行项。要获得被点击项目的索引，只需点击您想要的行，而不是在复选框上方，在不是复选框但在同一行的项目上方。

添加这个标签

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

当您 select 一个项目时，根据文档，它会抛出 selected 项目的值。获取数据项 select

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

删除项目示例：添加此标签 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)
          }
         }
        }
      }
    }
  },

Answer 2

在您的 HTML 模板中 <Table :columns="myColumns" :data="myData" /> 什么都不做。

在你的 <script> 中，当你点击一行时，你可以为你的函数获取一个 params 对象，其数据结构如下：

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

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

如何在iview vue中的Table元素中获取选定行的索引？

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

vue.js

html-table

iview