@VUE封装handsontable（仿写Element样式）-重点查看使用方法

#Handsontable VUE+element-ui 实现Excel复制文本到项目表格列表（基于Elemenet）

前言：项目里有这么一个需求，作为前端人员，老板提出来的各种要求我们都要想办法费劲脑汁去完成，某天老板提出来了个问题问我：你能否把excel的内容复制到表格的编辑页面，当时想回答不能，没做过，但是出于微小自尊心的我，想尝试尝试，毕竟我们做的是金融投资基金类管理系统，大量的数据要录入，这样很麻烦的。ok，给我点时间尝试下呗，我这么回答。于是就有了以下经验，分享给大家。
…

封装插件名称： handsontable
封装文件夹：tableExcel
配置参考网站： https://handsontable.com/docs/api/options/#fixedcolumnsleft
更新内容： （暂时够用，不需要更新，如有问题请联系博主）

一：参考图例。

二：配置项。

下面展示一些 主要配置项 。

//这里展示的是主要配置项目（重要）';
// 主要配置项
// 粘贴的值
hotSettings: {
  readOnly: false,//只读模式（false可写，true只读）
  licenseKey: 'non-commercial-and-evaluation',
  data: [], // 表格数据
  columns: [],
  colHeaders: [], // 表头数据
  renderAllRows: true,
  viewportColumnRenderingOffset: 0, // 渲染列数
  viewportRowRenderingOffset: 0, // 渲染行数
  maxRows: 0, // 最大行
  maxCols: 0, // 最大列
  // copyable:false,//是否允许复制
  rowHeaders: false, // 行表头，可以使布尔值（行序号），可以使字符串（左侧行表头相同显示内容，可以解析html），也可以是数组（左侧行表头单独显示内容）。
  autoWrapRow: true, // 自动换行
  manualColumnFreeze: false, // 手动固定列  ?
  manualColumnMove: false, // 手动移动列
  manualRowMove: false, // 手动移动行
  manualColumnResize: false, // 手工更改列距
  manualRowResize: false, // 手动更改行距
  comments: false, // 添加注释  ?
  cell: [ // ???
    // {row: 1, col: 1, className: 'htCenter htMiddle',},
  customBorders: [], // 添加边框
  columnSorting: false, // 排序
  stretchH: 'all', // 根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展 all全部扩展
  fillHandle: true, // 选中拖拽复制 possible values: true, false, "horizontal", "vertical"
  fixedColumnsLeft: 0, // 固定左边列数
  fixedRowsTop: 0, // 固定上边列数
  mergeCells: [ // 合并
    // { row: 0, col: 1, rowspan: 1, colspan: 2 } // 指定合并
    //  {row: 3, col: 4, rowspan: 2, colspan: 2}
  afterChange: '', //点击值改变后的事件监听
  afterPaste: '',//复制粘贴值改变后的事件监听
  beforeChangeRender: ''
三：使用方法。
 
切记安装插件
 
npm install handsontable-pro/vue
npm install handsontable-pro
点我获取源码 提取码： yang
 
①：下载完成后拖进自定义目录文件。
 
.
 ②：页面进行引用。
 
③：页面自定义变量（变量可自定义）
 
// about
colHeaders: ['指标（单位：万）', '合计'], // 表头列表
tableInfoList: [], // 表格内容
columns: [], // 列对应数据
fixedColumnsLeft: 0, // 固定左侧列数
fixedRowsTop: 0, // 固定头部列数
④：定义只读模式（传的参数，为数组）
 
rowReadOnlyList ---行只读 [0,1,2,3]
colReadOnlyList ---列只读 [0,1,2,3]
⑤：传值渲染（可以根据封装组件自己定义）
 
// 调用封装组件的方法
this.$refs.tableExcels.init(this.colHeaders, this.tableInfoList, this.columns, this.fixedColumnsLeft, this.fixedRowsTop, false, [5], [1])
⑥：更新数据
 
// 更新数据
this.$refs.tableExcels.renderValue(//这里是自定义的列表数组this.cashList)
⑦：重新渲染（看情况调用）
 
// 重新渲染（看情况调用）
this.$refs.tableExcels.reRenders()
⑧：只读切换（true:表格全部不可编辑||false:解除全部自定义编辑）
 
// true/false
this.$refs.tableExcels.readOnlyMode(false)
⑨：父组件接收改变的值
 
// true/false
tableExcel(dataObj) {
  if (dataObj.type === 'doubleClick') {
	//点击改变数组后返回的数据
  } else if (dataObj.type === 'paste') {
    //复制粘贴改变数组后返回的数据
四：结尾语。
 
给个关注呗，谢谢各位支持，有任何问题请联系本人。
原表格标签修改为：Handsontable
对于 columns，key 或者 data 属性名都可以用来存放后端字段名
对于 columns 中 type 属性，仅支持：autocomplete、checkbox、date、dropdown、handsontable、numeric、password、text、time，默认为 text，切记不要设置 type 类型为其他值
<template>
    <Handsontable
        :selectBoxConfig="selectBoxConfig"
        :columns="columns"
        v-model="tableData"
        @click="handso
                                    使用软件录入数据时一条条的输入太慢，在excel中整理数据，将excel中整理好的数据直接复制粘贴到表格中（前提粘贴dom应该是可输入的才可粘贴），并在页面中添加清空数据功能。
                                    elementui表格自带全选功能只能实现全选当前页,要实现所有选中需要一个checkbox
<el-checkbox :indeterminate="indeterminate" @change="handleCheck"  label="所有商品" v-model="allCheck"> </el-checkbox>
<el-table
    :data="tableData"
    ref="recordTable"
    :row-key="getRowKey
                                    场景：复制表格单行数据，到新页面粘贴。点击操作栏的“复制”，复制单行数据。进入另一个页面时，判断是否有缓存，有缓存则显示该弹窗，没有缓存不显示；点击“取消”或“确定”时，清空缓存。
                                    说明想要实现从excel表格复制内容之后，在vue页面上粘贴。有两个情况（1）无论从哪一列点击开始粘贴，都是从点击的列开始粘贴。效果如上图1（2）点击哪一列开始粘贴，从此列开始粘贴，如果点击的列不是可以粘贴的列，那么也是从可以粘贴的列开始粘贴（只能点击可以粘贴列的前面列才可以粘贴，点击后面列不能粘贴）效果如上图2注意如果多列需要粘贴，那么这些列必须是。比如columns=[name,key,age],那么不能只粘贴{name,age},中间。.........
以下是做这个功能的由来（觉得无聊的直接去看代码，捂脸）
老大让我做一个从excel复制选中的内容，然后在el-table里面黏贴，从而实现数据的批量导入到后台管理系统中，这样就不用一个一个输入了，我刚开始想，这怎么可能嘛，一个是excel表格，一个是代码，这
俩咋看也不沾边啊，然后老大给我说，这种功能是有的，你去网上随便一搜，很多教程的，那个clipboard插件好像就可以，然后我去搜了，发现不是那样，草（是一种植物），那个clipboard的复制，说到底也是给要复制的地方加个事件触发，然
                                    console.log(row)打印出来的数据，是当前行的所有返回数据。4.在methods中定义方法handleCopyLink即可。利用此方法，就可以实现点击表格中某一个单元格进行复制其内容。需求实现点击表格中的某一个单元格能够进行复制其内容。1.安装插件vue-clipboard2。2.在main.js中引入。...
        <div class="h_top">
          <span>新建任务</span>
          <img src="../../../../static/img/close.png" alt="" @click="close_twoTableDelete">
        <div cla