devextreme-vue的DxDataGrid如何显示行号列

devextreme-vue我使用的是23.2版本，其DxDataGrid如何显示行号列，官方一直没有方案。

DataGrid - How to display a row number in data rows in Angular | DevExpress Support

dxDataGrid - provide capability to display a column with row numbers | DevExpress Support

因为涉及到分页、分组、统计，等等，其row.rowType有：“data”、"detail"、"detailAdaptive"、groupFooter"、"header"、"filter"、"totalFooter"、“group”这很多种，我们想要的是计算“data”类型的行的行号。rowInfo的rowIndex,dataIndex,loadIndex都不能真实的反映“资料行号”，用pageIndex*pageSize+rowIndex+1计算都是错误的。

看起来自己在dataSource中为每个row计算一个rowNumber值可能比较靠谱。要考虑几个问题：

（1）计算的时机：

1. 点击column排序，
2. 拖动column分组，
3. filter栏打入文字，
4. 搜索框打入文字，
5. 增加、删除一行资料
6. dataSouce改变
7. ...

前面5个，可以监听option-changed事件：

<template>
<DxDataGrid ref="gridBackend" @option-changed="onOptionChanged" />
</template>

<script setup>
import { ref, nextTick, onMounted, onUnmounted, watch } from 'vue';
import {
  DxDataGrid, DxColumn, DxPager, DxPaging, DxGroupPanel,
  DxSearchPanel, DxSearch, DxLoadPanel, DxEditing,
  DxColumnChooser, DxSelection, DxColumnFixing,
  DxFilterRow, DxFilterPanel, DxHeaderFilter, DxSorting,
  DxScrolling, DxSummary, DxTotalItem
} from 'devextreme-vue/data-grid';
import { DxTabPanel, DxItem as DxTabPanelItem } from 'devextreme-vue/tab-panel';
import ArrayStore from 'devextreme/data/array_store';
import DataSource from 'devextreme/data/data_source'
let gridBackend = ref();

const onOptionChanged = function (e) {
  //console.log(e);
  if (
    e.fullName.includes('filter') ||
    e.fullName.includes('sort') ||
    e.fullName.includes('group') ||
    e.fullName.includes('search') ||
    e.fullName == 'editing.changes'
  ) {
      nextTick(function () {
        recomputeRowNumber(gridBackend.value, dataSourceBackendMonitors.value);
      });
  }
}
</script>

第6个是你改变数据集的时候。

（2）如何对数据集排序过滤；

DxDataGrid在排序过滤时，不会改变原始数据集，我想找到它处理后的数据集，然后计算一个rowNumber，但是翻了源码，它没有保存这个完整的排序过滤后的数据集。但找到一些方法来计算，不用自己写计算逻辑。

function recomputeRowNumber(dxGrid, dataSet) {
  let dc = dxGrid.instance.getController('data');
  let ds = dxGrid.instance.getDataSource();
  /**
   * 不能通过ds.loadOptions();获取参数，获取到的ops是store中的，赋值filter后，它会存起来，
   * 过滤行的filtervalue清掉后，dc.getCombinedFilter还是会从store返回之前的。
   */
  //let ops = ds.loadOptions();
  //ops.filter = dc.getCombinedFilter();
  // console.log('参数：',ds.filter(),dc.getCombinedFilter());

  let ops = {
    requireTotalCount: false,
    filter: dc.getCombinedFilter(),
    group: ds.group(),
    sort: ds.sort()
  }
  //console.log('参数：',ops);
  //ds.store().load(ops)
  new ArrayStore(dataSet).load(ops)
    .done(function (items) {
      //console.log('买', ops, items);
      let rowNumber = 0;
      let groupLevels = -1;
      if (ops.group) groupLevels = ops.group.length;
      function modifyRecords(items, groupLevel) {
        items.forEach(function (item) {
          if (groupLevel < groupLevels) {
            modifyRecords(item.items, groupLevel + 1);
          }
          else {
            rowNumber++;
            item.rowNumber = rowNumber;
          }
        });
      }
      modifyRecords(items, 0);
    });
}

（3）如何显示

想显示在最左边，不要受分组列影响，需要把分组列放在第2列，设定一个type="groupExpand"的列：

<DxColumn data-field="OID" width="50" :visible="false" :fixed="true" :allow-filtering="false"
            :allow-sorting="false" :allow-grouping="false" :allowEditing="false" :allowAdding="false" />
            
          <DxColumn caption="#" data-field="rowNumber" width="50" alignment="center" :fixed="true"
            :allow-filtering="false" :allow-sorting="false" :allow-grouping="false" :allowEditing="false"
            :allowAdding="false" />
          <DxColumn type="groupExpand" />

 （4）优化

1. 因为是在nextTick之中，即渲染后再修改，因此rowNumber列会有个闪烁，不知如何避免。
2. optionChanges事件，在打入过滤值时可能会触发3次，如何防抖？用一个timer：

   let recomputeRowNumberTimer;
   const onOptionChanged = function (e) {
     ...
     nextTick(function () {
           if (recomputeRowNumberTimer) clearTimeout(recomputeRowNumberTimer);
           recomputeRowNumberTimer=setTimeout(function(){
             recomputeRowNumber(gridBackend.value, dataSourceBackendMonitors.value);
           },0);
         });

效果为：