如何从 Excel 复制行并粘贴到制表符表中保持字段可编辑？

Question

我正在使用带有 vue.js 的制表器库，我想从 Excel 复制单行或多行并将其粘贴到制表器表中，但这样做时，数据仅粘贴到一列中。

下面是来自Excel的数据，我想复制这些数据并粘贴到制表器表中（注意：制表器表也有3列）因此，在粘贴这些Excel数据时，这些数据被添加到制表器的一列中，但我希望这些复制的数据应添加到 3 列。谁能建议我该怎么办？

这是我的代码：

<template>
  <div ref="table"></div>
</template>

<script>
import Tabulator from 'tabulator-tables'; //import Tabulator library
import 'tabulator-tables/dist/css/tabulator.min.css';
import moment from 'moment';

export default {
  data: function() {
    return {
      tabulator: null, //variable to hold your table
      tableData: [
        
      ], //data for table to display
      columns: [
        {
          title: 'Name',
          field: 'name',
          editor: 'input',
          validator: ['required', 'maxLength:50'],
        },
        {
          title: 'Task',
          field: 'owner',
          editor: 'input',
        },
        {
          title: 'Start Date',
          field: 'start_date',
          sorter: 'date',
          editor: 'input',
          validator: 'required',
        },
      ],
    };
  },
  watch: {
    //update table if data changes
    tableData: {
      handler: function(newData) {
        this.tabulator.replaceData(newData);
      },
      deep: true,
    },
  },
  mounted() {
    //instantiate Tabulator when element is mounted
    this.tabulator = new Tabulator(this.$refs.table, {
      data: this.tableData, //link data to table
      reactiveData: true, //enable data reactivity'
      layout: 'fitColumns',
      columns: this.columns, //define table columns
      selectable: false,
    });
  },
};
</script>

Answer 1

您似乎没有在表格中启用剪贴板功能，如果没有启用此功能，制表符将无法接受粘贴的数据。

您需要在表构造函数中设置 clipboard 选项

var table = new Tabulator("#example-table", {
    clipboard:"paste", //enable clipboard paste functionality
});

有关完整详细信息，请参阅剪贴板文档

Answer 2

制表符的内置粘贴解析器不支持粘贴整个表格的单元格，而是根据 DOM 功能粘贴到单个单元格中。

我设法通过解决方法解决了该问题。 完美运行。

考虑到您已经启动了表格并且 UI 上有一个表格。

基本上，我会中断

div

的粘贴事件，然后添加我自己的自定义粘贴解析器，保持表格单元格可编辑。

// Global function to make all the tables on the page
function makeTabulatorTable(divID, columnList, rowData, clipboardPasteBool) {
    var tableObj = {
        columns: columnList,
        data: rowData,
        layout: "fitColumns",
        rowHeight: 25,
        columnHeaderVertAlign: "middle",
        tooltips: true,
        columnDefaults: {
            tooltip: true,
            headerTooltip: true,
        },
    };

    if (!clipboardPasteBool) {
        // Only copy function for display table
        tableObj.clipboard = "copy";
    }

    // Create table
    var table = new Tabulator("#" + divID, tableObj);

    return table;
}

// Render preview table
var previewTable = makeTabulatorTable("preview-table", previewTableColumns, [{}], true);

// Add a custom paste parser to the table, avoid pasting in cells
document.getElementById("preview-table").addEventListener("paste", (event) => {
    event.preventDefault();

    // Column names to parse
    const columnFields = ["sand", "silt", "clay", "pb", "th33", "th1500"];

    // Custom tabulator paste parser
    // Trim the clipboard data and then split into rows
    let rows = event.clipboardData.getData('Text').trim().split("\n");

    // Transform each row and convert to object
    let clipboardArray = rows.map(row => {
        // Prepend an empty cell for the ID and split by tabs
        let cells = [...row.split("\t")];

        // Convert the array of cells into an object based on the column fields using reduce
        let rowObj = columnFields.reduce((obj, field, index) => {
            obj[field] = cells[index];
            return obj;
        }, {});

        return rowObj;
    });

    // Enable buttons after paste
    enableDisableBtns(false);
    
    // Set data in table
    previewTable.setData(clipboardArray);
});

// Generate preview table columns
var previewTableColumns = [
    { title: "ID", formatter: "rownum", hozAlign: "center", width: 40 },
    { title: 'Sand <span style="color:teal;">(%)</span>', hozAlign: "end", field: "sand", editor: "number", formatter: floatFormatter },
    { title: 'Silt <span style="color:teal;">(%)</span>', hozAlign: "end", field: "silt", editor: "number", formatter: floatFormatter },
    { title: 'Clay <span style="color:teal;">(%)</span>', hozAlign: "end", field: "clay", editor: "number", formatter: floatFormatter },
    { title: '<i>&rho;<sub>b</sub></i> <span style="color:teal;">(g/cm<sup>3</sup>)</span>', hozAlign: "end", field: "pb", editor: "number", formatter: floatFormatter },
    { title: 'th33', hozAlign: "end", field: "th33", editor: "number", formatter: floatFormatter },
    { title: 'th1500', hozAlign: "end", field: "th1500", editor: "number", formatter: floatFormatter }
];

<div name='preview-table' id='preview-table'></div>