@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
①:下载完成后拖进自定义目录文件。
.
②:页面进行引用。
③:页面自定义变量(变量可自定义)
// 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') {
//复制粘贴改变数组后返回的数据
}
},
四:结尾语。
给个关注呗,谢谢各位支持,有任何问题请联系本人。