类星体Q-表如何获得过滤或排序行？

Question

我被塞了下来，我安装了类星型2.0.0，但是它没有一个属性来获得q-table的过滤或排序的rows.In以前的版本，它有一个computedRows属性，但是在最新的版本中，它没有尝试向Q表添加新的特性，比如突出显示焦点的行，并启用键盘特性来允许行内编辑等等.因此，我需要知道行数据(模型)及其对应的html行。

• 类星体ver: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));
    },