Quasar Q-Table 如何获取筛选或排序的行？

Question

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

类星体 ver:2.0.0
Vuejs 3
打字稿

Answer 1

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

 <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));
    },

Quasar Q-Table 如何获取筛选或排序的行？

Quasar Q-Table how can I get the filtered or sorted rows?

javascript

typescript

vue.js

quasar