Quasar Q-Table 如何获取过滤或排序的行？答案

【问题标题】：Quasar Q-Table how can I get the filtered or sorted rows?Quasar Q-Table 如何获取过滤或排序的行？
【发布时间】：2021-09-15 15:36:21
【问题描述】：

我被卡住了，我安装了 Quasar 2.0.0 版，但它没有获取过滤或排序行的属性。在以前版本的 q-table 中它有一个 computedRows 属性，但在最新版本中它没有吨我正在尝试向 q-table 添加新功能，例如突出显示重点行并启用键盘功能以允许内联编辑等......所以我需要知道行数据（模型）及其对应的 html 行。

类星体版本：2.0.0
Vuejs 3
打字稿

【问题讨论】：

我刚从 Quasar 开始，但我有这个。$refs.myTable.computedRows。

标签： javascript typescript vue.js quasar

【解决方案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));
    },

【讨论】：