vue 表格组件，记录 vxe-table grid 获取 rowIndex 行索引、列索引的详细说明
<p>vue 表格组件，记录 vxe-table grid 获取 rowIndex 行索引、列索引的详细说明</p><p>https://vxetable.cn</p>
<p>表格有 3 种索引机制：<br>
行索引：<code>rowIndex</code>、<code>$rowIndex</code>、<code>_rowIndex</code><br>
列索引：<code>columnIndex</code>、<code>$columnIndex</code>、<code>_columnIndex</code></p>
<p>不同的索引区别在于是否启用虚拟滚动，如果未启用虚拟滚动情况下，基本都相同的；如果启用虚拟滚动后，如果需要用到索引，那就需要区分索引了。</p>
<pre><code>row：行数据对象
rowIndex：指向 props.data 中的索引，对应方法 getRowIndex(row)
$rowIndex：指向可视区渲染中的行索引，对应方法 getVMRowIndex(row)
_rowIndex：指向当前表格数据的索引，对应方法 getVTRowIndex(row)
column：列配置对象
columnIndex：指向 props.columns 中的索引，对应方法 getColumnIndex(column)
$columnIndex：指向可视区渲染中的列索引，对应方法 getVMColumnIndex(column)
_columnIndex：指向当前表格列的索引，对应方法 getVTColumnIndex(column)
</code></pre>
<h2 id="表格插槽获取">表格插槽获取</h2>
<p>插槽模板中可以通过参数直接获取</p>
<pre><code>// ...
<vxe-column ...>
<template #default="{ rowIndex, $rowIndex, _rowIndex }">
<span>{{ rowIndex }} 指向 props.data 中的索引</span>
<span>{{ $rowIndex }} 指向可视区渲染中的行索引</span>
<span>{{ _rowIndex }} 指向当前表格数据的索引</span>
<template>
</vxe-column>
// ...
</code></pre>
<h2 id="调用方法获取">调用方法获取</h2>
<p>可以通过调用方法方式获取指定行的索引</p>
<pre><code>// ...
const $table = tableRef.value
$table.getRowIndex(row) // 指向 props.data 中的索引
$table.getVMRowIndex(row) // 指向可视区渲染中的行索引
$table.getVTRowIndex(row) // 指向当前表格数据的索引
// ...
</code></pre>
<p>https://gitee.com/x-extends/vxe-table</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/18879589
頁:
[1]