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

@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') {
    //复制粘贴改变数组后返回的数据
  }
},

四：结尾语。

给个关注呗，谢谢各位支持，有任何问题请联系本人。