vue 中使用 vxe-table grid 获取 rowIndex 行索引、列索引的详细说明

vue 中使用 vxe-table grid 获取 rowIndex 行索引、列索引的详细说明

https://vxetable.cn

表格有 3 种索引机制：
行索引：rowIndex、$rowIndex、_rowIndex
列索引：columnIndex、$columnIndex、_columnIndex

不同的索引区别在于是否启用虚拟滚动，如果未启用虚拟滚动情况下，基本都相同的；如果启用虚拟滚动后，如果需要用到索引，那就需要区分索引了。

row：行数据对象
rowIndex：指向 props.data 中的索引，对应方法 getRowIndex(row)
$rowIndex：指向可视区渲染中的行索引，对应方法 getVMRowIndex(row)
_rowIndex：指向当前表格数据的索引，对应方法 getVTRowIndex(row)

column：列配置对象
columnIndex：指向 props.columns 中的索引，对应方法 getColumnIndex(column)
$columnIndex：指向可视区渲染中的列索引，对应方法 getVMColumnIndex(column)
_columnIndex：指向当前表格列的索引，对应方法 getVTColumnIndex(column)

表格插槽获取

插槽模板中可以通过参数直接获取

// ...
<vxe-column ...>
    <template #default="{ rowIndex, $rowIndex, _rowIndex }">
      <span>{{ rowIndex }} 指向 props.data 中的索引</span>
      <span>{{ $rowIndex }} 指向可视区渲染中的行索引</span>
      <span>{{ _rowIndex }} 指向当前表格数据的索引</span>
    <template>
</vxe-column>
// ...

调用方法获取

可以通过调用方法方式获取指定行的索引

// ...
const $table = tableRef.value
$table.getRowIndex(row) // 指向 props.data 中的索引
$table.getVMRowIndex(row) // 指向可视区渲染中的行索引
$table.getVTRowIndex(row) // 指向当前表格数据的索引
// ...

https://gitee.com/x-extends/vxe-table