复制excel里的数据，渲染到el-table中

案例一、

<template>
  <div class="book">
    <el-input
      type="text"
      v-model="paster"
      @paste.native="pasteMe"
      placeholder="请输入粘贴的内容"
    />
    <el-table :data="tableData" border stripe>
      <el-table-column
        v-for="col in tableHeader"
        :key="col.key"
        :property="col.key"
        :label="col.label"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row[col.key] }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            查看
          </el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paster: "",
      tableHeader: [
        {
          label: "小王",
          key: "one",
        },
        {
          label: "小李",
          key: "two",
        },
        {
          label: "小张",
          key: "three",
        },
      ],
      tableData: [
        {
          one: "111",
          two: "222",
          three: "333",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    pasteMe(e) {
      let newHeader = [];
      for (var k = 0; k < this.tableHeader.length; k++) {
        newHeader.push(this.tableHeader[k].key);
      }
      let source = e.clipboardData.getData("Text");
      // 首先对源头进行解析
      let rows = source.split("\n"); // 拆成很多行
      for (let i = 0; i < rows.length; i++) {
        if (rows[i] != "") {
          // 如果某一行不是空，再按列拆分
          let columns = rows[i].split("\t"); // 已经按列划分
          let dataone = {}; // 声明一行数组
          for (let j = 0; j < columns.length; j++) {
            // 读取tableData里的第j对应的key值;
            let keys = newHeader[j]; // key的名
            dataone[keys] = columns[j];
          }
          this.tableData.push(dataone);
        }
      }
    },
  },
};
</script>

<style>
</style>

方法二、

<template>
  <div>
    <el-divider content-position="left">
      <span style="color: #999999; font-weight: bold">
        <span class="el-icon-setting"></span>
        剪切板Demo
      </span>
    </el-divider>
    <el-row>
      <el-select
        v-model="tableName"
        placeholder="请选择需要导入的数据表"
        size="mini"
        style="margin-right: 10px"
      >
        <el-option value="1" label="表1" />
        <el-option value="2" label="表2" />
        <el-option value="3" label="表3" />
      </el-select>
      <el-button icon="el-icon-document" type="primary" size="mini">
        文件导入
      </el-button>

      <el-button
        icon="el-icon-delete"
        type="default"
        size="mini"
        @click="clear"
      >
        重置
      </el-button>
      <el-button
        icon="el-icon-check"
        type="success"
        size="mini"
        style="float: right"
      >
        保存
      </el-button>
    </el-row>
    <el-table size="mini" :data="tableData" style="margin-top: 10px" stripe>
      <el-table-column
        v-for="col in tableColumns"
        :key="col.prop"
        :label="col.label"
        :width="col.width"
        :min-width="col.minWidth"
      >
        <template slot-scope="scope">
          {{ tableData[scope.$index][col.prop] }}
        </template>
      </el-table-column>
      <div slot="empty">
        <el-empty
          description="请选择正确的数据表后，点击文件导入按钮或Ctr+V进行导入数据"
        >
        </el-empty>
      </div>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableName: "",
      tableData: [],
      tableColumns: [
        { prop: "col1", label: "列1", width: "auto", minWidth: "120" },
        { prop: "col2", label: "列2", width: "auto", minWidth: "120" },
        { prop: "col3", label: "列3", width: "auto", minWidth: "120" },
        { prop: "col4", label: "列4", width: "auto", minWidth: "120" },
        { prop: "col5", label: "列5", width: "auto", minWidth: "120" },
        { prop: "col6", label: "列6", width: "auto", minWidth: "120" },
        { prop: "col7", label: "列7", width: "auto", minWidth: "120" },
      ],
    };
  },
  methods: {
    initTable(text) {
      if (text) {
        let rows = text.split("\r\n");
        rows.forEach((row, index) => {
          let r = {};
          row.split("\t").forEach((val, i) => {
            r["col" + i] = val;
          });
          this.tableData.push(r);
        });
        console.log(this.tableData);
      } else {
        this.$message("您没有复制内容");
      }
    },
    clear() {
      this.tableData = [];
    },
  },
  mounted() {
    // 监听 ctrl+v键盘事件
    document.addEventListener("paste", (event) => {
      // 获取解析 粘贴的文本
      let text = (event.clipboardData || window.clipboardData).getData("text");
      this.initTable(text);
    });
  },
};
</script>