查看: 60|回覆: 0

vue 表格组件,记录 vxe-table grid 获取 rowIndex 行索引、列索引的详细说明

[複製鏈接]

3

主題

0

回帖

0

積分

热心网友

金币
0
閲讀權限
220
精華
0
威望
0
贡献
0
在線時間
0 小時
註冊時間
2008-10-13
發表於 2025-5-16 10:19:00 | 顯示全部樓層 |閲讀模式

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



来源:https://www.cnblogs.com/qaz666/p/18879589
回覆

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即注册

本版積分規則

相关侵权、举报、投诉及建议等,请发 E-mail:qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部