bootstrap-table formatter 使用vue組件

import { Subject } from "rxjs";
import Vue from "vue";

export const BtEventHub = new Subject();

const VueComList = [];
let VueComId = 0;

BtEventHub.debounceTime(10)
  .filter(() => VueComList.length > 0)
  .delay(10)
  .subscribe(function() {
    const len = VueComList.length - 1;

    for (let i = len; i >= 0; i--) {
      const item = VueComList[i];
      const dom = document.getElementById(item.name);

      if (dom != null) {
        new Vue(item);
        VueComList.splice(i, 1);
      }
    }

    if (VueComList.length === 0) {
      VueComId = 0;
    }
  });

export function BtAddVueCom(obj: object) {
  const id = `_vue_com_${VueComId++}`;

  VueComList.push({
    el: "#" + id,
    name: id,
    ...obj
  });

  setTimeout(() => {
    BtEventHub.next();
  }, 0);

  return id;
}

window["BtAddVueCom"] = BtAddVueCom;

---

function ColFormatter1(value, row) {
  const id = window.BtAddVueCom({
    template: '<el-switch v-model="row.IsShow"></el-switch>',
    data: function () {
      return {
        row
      }
    }
  });
  return `<div id="${id}"></div>`;
}