大数据表格后台排序

<template>
  <div ref="dwka" class="cand" style="overflow: auto">
    <div ref="momp"></div>
  </div>
</template>
<script>
import {TableSheet, S2Event} from '@antv/s2';


function generateRawData(row, col) {
  const res = [];

  const rowKeys = Object.keys(row);
  const colKeys = Object.keys(col);

  for (let i = 0; i < row[rowKeys[0]]; i++) {
    for (let j = 0; j < row[rowKeys[1]]; j++) {
      for (let m = 0; m < col[colKeys[0]]; m++) {
        for (let n = 0; n < col[colKeys[1]]; n++) {
          res.push({
            func: `p${i}`,
            city: `c${j}`,
            type: `type${m}`,
            subType: `subType${n}`,
            number: i * i,
          });
        }
      }
    }
  }

  return res;
}

var js = 15;
const s2DataConfig = {
  fields: {
    columns: ['func', 'city', 'type', 'subType', 'number'],
  },
  data: generateRawData(
      {fun: js, city: js},
      {type: js, sub_type: js},
  ),
};


export default {
  name: "MompFragment",
  methods: {}, mounted() {
    this.$nextTick(() => {
          const momp = this.$refs.momp;
          const dwka = window.getComputedStyle(this.$refs.dwka)
          const s2Options = {
            width: parseInt(dwka.width.replace("px", "")),
            height: parseInt(dwka.height.replace("px", "")),
            customSVGIcons: [
              {
                name: 'ups',
                svg: 'http://192.168.31.123:8082/public/icon-chevron-up.svg',
              },
              {
                name: 'dos',
                svg: 'http://192.168.31.123:8082/public/icon-chevron-down.svg',
              },
            ], showDefaultHeaderActionIcon: false,
          };
          const s2 = new TableSheet(momp, s2DataConfig, s2Options);
          s2.render();
          s2.on(S2Event.COL_CELL_CLICK, (v) => {
            var f = s2.getCell(v.target).getMeta().field;
            var ep = "ups";
            try {
              var iconNames = s2.options.headerActionIcons[0].iconNames[0];
              if (iconNames === ep) {
                ep = "dos"

              }
            } catch (e) {

            }
            var fe = {
              headerActionIcons: [
                {
                  iconNames: [ep],
                  belongsCell: 'colCell',
                  displayCondition: (meta) => meta.id === `root[&]${f}`,
                }]
            }
            console.log(ep, f)
            s2.setOptions(fe);
            // console.log(s2.getCell(v.target).getMeta().field)
            s2.setDataCfg({
              "data": generateRawData(
                  {fun: js, city: js},
                  {type: js, sub_type: js},
              )
            })
            s2.render(true);
            js += 1;
          })
        }
    )
  }
}
</script>
<style>
</style>