quasar-table 序号的column和row配置

如果我想实现这个带序号的table，使用q-table组件 参数配置如下

const columns = [
  { name: 'id', label: '序号', align: 'center', field: 'id', sortable: true },
  {....}
  ]

  <div class="bg-white q-pr-md q-pt-sm">
        <q-table
          flat
          :columns="columns"
          :rows="rows"
          row-key="id"
          :loading="loading"
          v-model:selected="selected"
          class="apply-table"
          selection="multiple"
        >
          <template v-slot:body-cell-id="props">
            <q-td
              :class="
                props.cols.filter((item) => item.name == 'id')[0].__thClass
              "
            >
              {{ props.rowIndex + 1 }}
            </q-td>
          </template>
          
          ......
          
            </q-table>
            </div>