handsontable自定义单元格属性、修改样式

<template>
  <div class="wrap">
     <hot-table
       ref="hotTable"
       :key="JSON.stringify(hotSettings.data)"
       :settings="hotSettings"
     ></hot-table>
  </div>
</template>

<script>
import Handsontable from "handsontable";
import { HotTable } from "@handsontable/vue";
import { registerAllModules } from "handsontable/registry";
import "handsontable/dist/handsontable.full.css";
// register Handsontable's modules
registerAllModules();
export default {
  components: {
    HotTable,
  },
  data() {
    Handsontable.renderers.registerRenderer(
      "negativeValueRenderer",
      negativeValueRenderer
    );
    function negativeValueRenderer(instance, td, row, col, prop, value, cell) {
      Handsontable.renderers.TextRenderer.apply(this, arguments);  // 这一行很重要，必须要
      // 第一行前8列字体加粗
      if (row == 0 && col < 8) {
        td.style.fontWeight = "bold";
      }
    }
    return {
      hotSettings: {
        data: [],
        rowHeaders: true,
        colHeaders: true,
        height: "100%",
        colWidths: 150,
        licenseKey: "non-commercial-and-evaluation",
        cells: (row, col, prop) => {
          var cellProperties = {};
          cellProperties.renderer = negativeValueRenderer;
          return cellProperties;
        },
      },
    };
  },
  mounted() {
      let arr = [
        [
          "Machine Id",
          "Recipe",
          "Lot Id",
          "Wafer Id",
          "Wafer Time",
          "Die Total Count",
          "Die Failed Count",
          "Die Success Count",
        ],
      ];
      for (let i = 0; i < 50; i++) {
        if (!arr[i]) {
          arr[i] = [];
        }
        for (let j = 0; j < 14; j++) {
          if (!arr[i][j]) {
            arr[i][j] = "";
          }
        }
      }
      this.$set(this.hotSettings, "data", arr);
  },
};
</script>

参考：
vue项目中使用handsontable总结 - 简书 (jianshu.com)
hansontable在vue中的基本使用 - ^Mao - 博客园 (cnblogs.com)