时间戳

首页 > 解决方案 > 如何从excel中复制一行并粘贴到制表符表格中以保持字段可编辑？

javascript - 如何从excel中复制一行并粘贴到制表符表格中以保持字段可编辑？

问题描述

我正在使用带有 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>

标签： javascriptexcelvue.jstabulator

解决方案

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

您需要在表构造函数中设置剪贴板选项

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

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

推荐阅读