Handsontable的使用實例

　　首先簡單地介紹一下handsontable，Handsontable Community Edition (CE) 是一個開源的JavaScript電子表格組件，非常流行的web應用程序的UI組件，可用於 各種技術，如react、Angular和vue，它很容易與任何數據源集成並提供了各種有用的功能，如數據綁定、驗證、排序和強大的上下文菜單，它可以處理大量數據而無需擔心性能問題，兼容所有現代瀏覽器和IE9+。簡而言之就是在頁面也能像excel一樣操作數據。

　　官方文檔地址：https://handsontable.com/docs/7.4.2/tutorial-introduction.html

　　我的實現效果（包含輸入框，文件，圖片，日期選擇，下拉框）

 

 

 我的Handsontable對象配置

new Handsontable(this.$refs.example, {
        data: this.handsontableData,//表數據
        width: "100%",
        height: "100%",
        rowHeaders: true,
        colHeaders: headers,//表頭數據
        fixedRowsTop: 0,
        columns: columns,//列的類型
        columnSorting: true,
        rowHeights: 30,
        colWidths: 300,
        manualColumnResize: true,
        manualRowResize: true,
        selectionMode: "range",
        manualRowMove: true,
        manualColumnFreeze: true,
        contextMenu: [
          "row_above",
          "row_below",
          "remove_row",
          "alignment",
          "freeze_column",
          "unfreeze_column"
        ],//右鍵菜單
        dropdownMenu: ["alignment"],//表頭篩選菜單
        language: "zh-CN",
        afterSelectionEnd: function(fromRow, fromCol, toRow, toCol) {
          window.hotSelection = this.hot.getSelected();//獲取選中的節點,存入全局變量
          if (!this.readOnly) {
            $.each(this.fileCol, function(index, val) {
              if (
                fromRow == toRow &&
                fromCol == toCol &&
                fromCol == val.index
              ) {
                document.querySelector(".fileBtn").disabled = false;//這里是一個文件上傳按鈕，進行控制
                return false;
              } else {
                document.querySelector(".fileBtn").disabled = true;
              }
            });
          }
        }.bind(this),//選中后觸發的事件
        licenseKey: "non-commercial-and-evaluation"//提示非商業用途

      })

這里的列類型有文本類型、數字類型、日期類型、下拉類型、還有就是自定義渲染

var columns=[]
//文本
columns.push({
        data: rs.data.options[i].optionNum,//設值
        type: "text",
        readOnly: this.readOnly
});
//數字
columns.push({
        data: rs.data.options[i].optionNum,
        type: "numeric",
        readOnly: this.readOnly
});
//日期
columns.push({
        data: rs.data.options[i].optionNum,
        type: "date",
        dateFormat: "YYYY-MM-DD",
        readOnly: this.readOnly
});
//下拉
columns.push({
        data: rs.data.options[i].optionNum,
        type: "dropdown",
        source: options,//下拉數組
        readOnly: this.readOnly
});
//自定義渲染
columns.push({
        data: rs.data.options[i].optionNum,
        renderer: this.fileRenderer,//渲染的方法
        readOnly: true
});

//文件渲染方法
    fileRenderer: function(
      instance,
      td,
      row,
      col,
      prop,
      value,
      cellProperties
    ) {
      var txt = "";
      if (value) {
        for (var i = 0; i < value.length; i++) {
          if (value[i].name) {
            txt +=
              "<a href='" +
              value[i].path +
              "' target='_blank'>" +
              value[i].name +
              "</a><br>";
          } else {
            continue;
          }
        }
      }
      td.innerHTML = txt;
    },

    //圖片渲染
    imgRenderer(instance, td, row, col, prop, value, cellProperties) {
      var txt = "";
      if (value) {
        for (var i = 0; i < value.length; i++) {
          if (value[i].name) {
            txt +=
              "<a onclick='previewPicFunc(" +
              i +
              ")'><img style='margin:5px;height: 100px;width:100px;object-fit: cover;' src='" +
              value[i].path +
              "' style='width:100px;height:100px;'></img></a>";
          } else {
            continue;
          }
        }
      }
      td.innerHTML = txt;
    }

自定義渲染就是將html代碼插入單元格里，從而實現想要的效果（視頻、圖片、a標簽等等）。