jspreadsheet-ce的使用

jspreadsheet-ce操作可直接编辑修改，与Excel类似，填完表格后可以用onblur触发更新数据，updateTable适用于表格内的数据修改，表格切换数据时会新增一列，解决方法是清空原表格重新填入，或V-show可以试试。

<script lang="ts">
// @ts-nocheck
import jexcel from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.css";
export default {
  name: "table-input",
  props: ["title", "input_fields", "items", "increased_field"],
  data() {
    var defaultItem = {};
    if (this.input_fields) {
      this.input_fields.forEach((v) => (defaultItem[v.name] = 0));
    }
    var column = this.columnfun(this.input_fields);
    var options = {
      data: this.items,
      columns: column,
      defaultColWidth: "150px",
      minDimensions:[2,1],
      onblur: this.blur,
      /* updateTable 表格内数据修改 */
      updateTable: function(instance, cell, col, row, val, label, cellName) {
         if (col == 0) {
         }
     },
    };
    return {
      options,
      defaultItem
    };
  },
  watch: {
    /* 监听title 点击切换fitting显示更新后值，先清空表格在重建 */
    input_fields(newValue, oldValue) {
      this.tableFun(this.items,newValue)
    },
    /* 监听items 切换Drug表格内容是否变化 */
    items(newValue, oldValue){
      this.tableFun(newValue,this.input_fields)
    }
  },
  methods: {
    /* 表格刷新 */
    tableFun(a, b){
      this.$refs.form.innerHTML = "";
      this.options = {
        data: a,
        columns: this.columnfun(b),
        defaultColWidth: "120px",
        minDimensions:[2,1],
        onblur: this.blur,
      };
      this.sheet()
    },
    /* 表格列是否为只读 */
    columnfun(value) {
      return value.map((v) => {
        return v.label === "Region"
          ? { type: "text", title: v.label, readOnly: true }
          : { type: "text", title: v.label }
      });
    },
    /* 表格外点击 触发更新列表数据，很重要 */
    blur(){
      var newItem = []
      // this.spreadsheet.getData()，是获取表格中的数据,
      this.spreadsheet.getData().map((v,i)=>{
        let dataone = {};
        var cellName = Object.keys(this.defaultItem);
        v.map((value,index)=>{
          cellName[0] === "name"&&index === 0?
            dataone[cellName[index]] = value :
            dataone[cellName[index]] = Number(value) 
        })
        newItem.push(dataone)
      })
      console.log(newItem);
      this.$emit("update:items", newItem);
    },
    /* 建立表格 */
    sheet(){
      let spreadsheet = jexcel(this.$refs.form, this.options);
      Object.assign(this, { spreadsheet });
    }
  },
  mounted: function () {
    this.sheet()
  },
};
</script>

结果展示