查看: 63|回复: 0

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

[复制链接]

1

主题

0

回帖

0

积分

积极分子

金币
0
阅读权限
220
精华
0
威望
0
贡献
0
在线时间
0 小时
注册时间
2009-6-15
发表于 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.

在本版发帖返回顶部