Quasar Q-Table如何获取经过过滤或排序的行

Question

我被卡住了，我安装了Quasar 2.0.0版本，但它没有获取筛选或排序行的属性。在以前版本的q-table中，它有computedRows属性，但在最新版本中没有我正在尝试向q-table添加新功能，如高亮显示聚焦行，并启用键盘功能以允许在线编辑等……所以我需要知道行数据(模型(及其对应的html行。

• Quasar版本：2.0.0
• Vuejs 3
• 打字稿

Answer 1

我找到了一个临时解决方案：这是我的q表：

<template v-slot:body="props">
<q-tr
class="row-data"
:props="props"
:rowID="props.row.id"
>
<q-td
@click="onTdClick($event, props.row, 
props.rowIndex, index)"
v-for="(col, index) in props.cols"
:key="col.name"
:props="props"
:column="col.name"
>
<slot :name="'column-' + col.name" :props="props" :row="props.row">
{{ col.value }}
</slot>
<slot
:name="'column-edit-' + col.name"
:props="props"
:row="props.row"
>
</slot>
</q-td>
</q-tr>
</template>
//Then I get the filtered rows by getting the displayed tr elements(each tr element has rowID attribute) :
getHtmlRows(): HTMLTableRowElement[] {
let htmlTable = this.getHtmlTable();
let htmlRows: HTMLTableRowElement[] = Array.from(
htmlTable.querySelectorAll("tr.row-data")
);
return htmlRows;
}, 
//If I want to get the row data corresponding to html row (tr) I used :
getRowData(id: number): any {
let table = this.$refs.qtableRef as QTable;
let rowData = table.rows?.find((rw) => rw.id == id);
return rowData;
},
getRowDataByHtmlRow(htmlRow: HTMLTableRowElement): any {
let rowID = htmlRow.getAttribute("rowID");
return this.getRowData(Number(rowID));
},

Answer 2

有一种未记录的访问computedRows和computedRowsNumber属性的方法，我是在谷歌上广泛搜索后才找到的。。。

1. 给您的表一个ref:<q-table ref="table" />
2. 通过参考访问这些属性：
   • this.$refs.table.computedRows
   • this.$refs.table.computedRowsNumber

这是在v2.0.0-beta 9中添加的_{(2021年3月8日(}

解释

computedRows--为您提供当前页面上显示的行

• 示例：如果总共有30个结果，但当前页面中只显示了10个，那么这将只返回这10行——想要全部返回吗？请参阅filteredSortedRows

filteredSortedRows--为您提供ALL所有页面上显示的行

• 示例：如果总共有50行，但有30行与筛选后的文本匹配并显示，并且每页显示10行，则会返回ALL筛选后的30行。如果没有经过过滤的文本，那么这将返回所有原始的50行

computedRowsNumber--为所有页面上显示的总行的长度

• ^{与filteredSortedRows.length} 相同

启用服务器端数据获取时，上述属性的行为可能会有所不同。我不得不检查源代码来发现这一点，但还没有在实践中测试过。

来源|我在哪里找到的