Handsontable 结合api接口实现数据填充

npm 包

import { HotTable } from "@handsontable/vue";

import Handsontable from "handsontable";

import "handsontable/dist/handsontable.full.css";

import $ from "jquery";

// 菜单汉化配置注册

import "handsontable/languages/zh-CN";

vue代码引用 

<!--tableData为后台接口、tableSettings 表格配置-->

<hot-table v-if="!loading" ref="hotTable" style="height: calc(100vh - 100px)" :settings="tableSettings"

        :data="tableData" :rowHeaders="true" :colHeaders="true" @keydown="handleKeyPress"

        licenseKey="00000-00000-00000-00000-00000"></hot-table>

vue中date中

tableSettings: {

        afterChange: this.handleAfterChange,

        afterSelectionEnd: this.updateCurrentRow,

        columns: [

          { type: "checkbox", data: "selected" },

          {

            data: "saveStatus",

            title: "是否检验",

            readOnly: true,

            renderer: function (instance, td, row, col, prop, value) {

              if (value == 0) {

                td.innerHTML = "检验未完成";

              }  else if (value == 1) {

                td.innerHTML = "已检验";

              } else if (value == '') {

                td.innerHTML = "检验未完成";

              } else if (value == null) {

                td.innerHTML = "检验未完成";

              } else {

                td.innerHTML = "";

              }

            },

          },

          // {

          //   data: "reviewSubmitStatus",

          //   title: "提交状态",

          //   readOnly: true,

          //   renderer: function (instance, td, row, col, prop, value) {

          //     if (value == 2) {

          //       td.innerHTML = "已驳回";

          //     } else {

          //       td.innerHTML = "";

          //     }

          //   },

          // },

          { data: "batchNo", title: "批号", readOnly: true },

          {

            data: "executePlanStatus", title: "是否点检", readOnly: true,

            renderer: function (instance, td, row, col, prop, value) {

              if (value == true) {

                td.innerHTML = "点检";

              } else {

                td.innerHTML = "未点检";

              }

            },

          },

          { data: "executePlanNums", title: "点检次数", readOnly: true },

          { data: "bomVersion", title: "Bom版本", readOnly: true },

          {

            data: "semiId", title: "附件", readOnly: true,

            renderer: (instance, td, row, col, prop, value, cellProperties) => {

              td.innerHTML = `<div  style='color: #0064B4;display: flex;' >

                  <el-link type="primary" οnclick="toupload('${value}')">${value ? '附件' : ''}</el-link></div>`;

              return td;

            },

          },

          {

            data: "shiftTypeName",

            title: "报检班次",

            readOnly: true,

            // renderer: function (instance, td, row, col, prop, value) {

            //   if (value == 1) {

            //     td.innerHTML = "白班";

            //   } else if (value == 2) {

            //     td.innerHTML = "夜班";

            //   } else if (value == 3) {

            //     td.innerHTML = "小夜";

            //   } else {

            //     td.innerHTML = "大夜";

            //   }

            // },

          },

          { data: "qty", title: "半成品长度", readOnly: true },

          {

            data: "orderDate",

            title: "报检时间",

            type: "date",

            readOnly: true,

            renderer: function (instance, td, row, col, prop, value) {

              td.innerHTML = value ? moment(value).format("YYYY-MM-DD") : '';

            },

          },

          { data: "mxSupplierName", title: "母线厂家", readOnly: true },

          { data: "mxBatchNo", title: "母线批次号", readOnly: true },

          { data: "mxSpecification", title: "母线规格", readOnly: true },

          { data: "jgsBatchNo", title: "砂批号", readOnly: true },

          { data: "jgsModel", title: "砂型号", readOnly: true },

          { data: "freeItem05Name", title: "内部规格", readOnly: true },

          { data: "appearance", title: "外观" },

          { data: "stubsGage01", title: "线径1" },

          { data: "stubsGage02", title: "线径2" },

          { data: "stubsGage03", title: "线径3" },

          { data: "stubsGage04", title: "线径4" },

          { data: "stubsGage05", title: "线径5" },

          { data: "stubsGage06", title: "线径6" },

          { data: "stubsGage07", title: "线径7" },

          { data: "stubsGage08", title: "线径8" },

          { data: "stubsGage09", title: "线径9" },

          { data: "stubsGage10", title: "线径10" },

          { data: "inspectionMax", title: "最大值", readOnly: true },

          { data: "inspectionMin", title: "最小值", readOnly: true },

          { data: "stubsGageToleRance", title: "公差", readOnly: true },

          { data: "inspectionAverage", title: "平均值", readOnly: true },

          { data: "freedom", title: "自由线圈" },

          { data: "snapN", title: "拉断力" },

          { data: "exitLip", title: "出刃率" },

          { data: "exitHeight", title: "出刃高度" },

          { data: "reverseNum", title: "扭转圈数" },

          { data: "brittleFailure", title: "脆断检测项" },

          { data: "testName", title: "实验名称", readOnly: true },

          // { data: "testPurpose", title: "实验目的", readOnly: true },

          {

            data: "diamondWireLevelName",

            title: "入库类型",

            type: "dropdown", // 使用下拉选择框类型的列

            source: [], // 选项数据源

          },

          {

            data: "qualityInspectionStaffName",

            title: "员工",

            type: "dropdown", // 使用下拉选择框类型的列

            source: [], // 选项数据源

          },

          {

            data: "qualityInspectionShiftTypeName",

            title: "检验班次",

            editor: "select",

            selectOptions: ["白班", "夜班", "小夜", "大夜"],

          },

          {

            data: "inspectionQualifiedName",

            title: "质检结果",

            editor: "select",

            selectOptions: ["合格", "不合格"],

          },

          {

            data: "unQualifiedReasonTypeName",

            title: "不合格原因",

            editor: "myselect",

            renderer: customDropdownRenderer,

            width: "200",

            chosenOptions: {

              multiple: true,

              data: [],

            },

          },

          { data: "unQualifiedReason", title: "异常描述" },

          { data: "remark", title: "备注" },

          // {

          //     data: 'name',

          //     type: 'dropdown', // 使用下拉选择框类型的列

          //     source: [], // 选项数据源（后续通过API填充）

          //     editor: 'select', // 自定义编辑器

          //     renderer: (instance, td, row, col, prop, value) => {

          //         // 渲染器

          //         Handsontable.renderers.TextRenderer.apply(this, arguments);

          //         // 可选：添加自定义样式

          //         td.classList.add('custom-select-renderer');

          //         if (value === 'John') {

          //             td.classList.add('john-selected');

          //         } else {

          //             td.classList.remove('john-selected');

          //         }

          //     }

          // },

        ],

        scrollbars: {

          alwaysVisible: true, // 总是显示滚动条

          cornerVisible: true, // 显示右下角滚动条

        },

        //单元格宽度

        //  colWidths: 120,

        //配置汉化

        language: "zh-CN",

        virtualViewportRowRendering: true,

        virtualViewportColumnRendering: true,

        //fixedRowsTop: 2, // 固定的行

        fixedColumnsLeft: 7, // 固定的列

        // fixedRowsBottom: 1, // 固定底行

        stretchH: "all", // 拉伸行，可选值为，all 拉伸所有，none 不拉伸，last 拉伸最后一行

        manualColumnResize: true, // 列拉伸,调整大小

        manualRowResize: true, // 行拉伸,调整大小

        manualColumnMove: true, // 拖动交换列

        //  dropdownMenu: true,    //筛选

        // filters: true,          //筛选

        //右键菜单

        // contextMenu: true,

        contextMenu: ["copy", "cut"],

        // dropdownMenu: true,    //筛选

        // filters: true,          //筛选

        contextMenu: false,

        rowHeaders: true,

        colHeaders: true,

        rowHeights: 40,

        minSpareRows:0,

        // autoColumnSize: true, // 根据内容自动调整列宽

        // width: "auto", // 表格宽度自适应

        height: "calc(90vh - 200px)", // 表格高度

        hotInstance: null, // 保存HotTable组件实例的引用

      },

methods中

//获取详情

    getDetail() {

      this.tableSettings.minSpareRows=0

      var user = JSON.parse(window.localStorage.getItem("pro__Login_Userinfo"));

      this.loading = true;

      this.tableData.length = 0;

      postAction("/QualityInspection/GetDetailPageList", {

        rows: 10000,

        page: 1,

        queryJson: JSON.stringify(this.queryJson),

      }).then(async (res) => {

        this.tableData.push(...res.data.items);

        if (this.tableData.length>0) {

          this.tableSettings.minSpareRows=6

        }

        this.tableData.forEach((i) => {

          if (

            i.qualityInspectionStaffId == null ||

            i.qualityInspectionStaffId == ""

          ) {

            i.qualityInspectionStaffId = user.value.staffId;

            i.qualityInspectionStaffName = user.value.staffName;

          }

        });

        await this.category();

        await this.disqualification();

        await this.staff();

        setTimeout(() => {

          this.loading = false;

        }, 100);

        // this.loading = false;

      });

    },

//获取入库

    async category() {

      await postAction("/DictoryDetails/GetValueList/JZLDJ").then((res) => {

        if (res.succeeded) {

          console.log(1);

          this.tableSettings.columns.find(

            (x) => x.data == "diamondWireLevelName"

          ).source = res.data; // 更新列的选项数据源

        }

      });

    },

    //不合格原因

    async disqualification() {

      await postAction("/DictoryDetails/GetValueList/CPBHGYY").then((res) => {

        if (res.succeeded) {

          this.tableSettings.columns.find(

            (x) => x.data == "unQualifiedReasonTypeName"

          ).chosenOptions.data = res.data.map((v) => {

            return {

              id: v,

              label: v,

            };

          }); // 更新列的选项数据源

        }

      });

    },

    //质检人员

    async staff() {

      await getAction("/Staff/GetNameList/品质管理部").then((res) => {

        if (res.succeeded) {

          console.log(3);

          this.tableSettings.columns.find(

            (x) => x.data == "qualityInspectionStaffName"

          ).source = res.data; // 更新列的选项数据源

        }

      });

    },