vue+handsontable页面表格插件
1.安装:npm install handsontable @handsontable/vue2.开始使用:import Handsontable from 'handsontable'import {HotTable} from '@handsontable/vue';<template><div><HotTable key="t...
·
1.安装:npm install handsontable @handsontable/vue
2.开始使用:
import Handsontable from 'handsontable'
import {HotTable} from '@handsontable/vue';
<template>
<div>
<HotTable key="t2" ref="table" :data="data" :settings="hotSettings"></HotTable>
</div>
</template>
export default {
name: 'App',
components: {
HotTable
},
data() {
return {
data: [[]],
hotSettings: {
minCols: 3,
minRows: 3,
className: "htCenter htMiddle",
selectionMode: 'single',
manualRowResize: true,
manualColumnResize: true,
colHeaders: true,
rowHeaders: true,
language: 'zh-CN',
mergeCells: true,
// copyPaste: true,
colWidths: 100,
autoWrapRow: true,
rowHeights: 30,
//对td的渲染
cells: function (row, column, prop) {
let cellProp = {};
let value;
if (value) {
//自定义你的td的renderer
cellProp.renderer = yourcellrenderer;
//定义td编辑方式,具体参见官方文档,false为不能编辑,但是键盘删除和复制粘贴是可用的
if (value.type) {
cellProp.editor = false;
} else {
cellProp.editor = 'text';
}
}
return cellProp //return 出来含有固定参数的对象,覆盖默认的配置
},
afterChange: function (changes, sources) {
console.log(changes, sources) // changes为数组数据改变后的坐标(row,col),sources改变的类型(具体参见文档)
},
contextMenu: {
items: {
//插入删除行和列,撤销重做等
'row_above': {},
'col_left': {},
'remove_row': {},
'remove_col': {},
'undo': {},
'redo': {},
'---------': {},
'yourContextMenuItem': {
name: '自定义右键菜单项',
disabled: function () {
//是否禁用
return false
},
callback: function () {
//点击菜单的回调
}
},
},
}
}
},
}
}}
3.获取table里面的数据:即和table绑定的data
4.获取合并的单元格数据:
let mergeData=this.$refs.table.hotInstance.getPlugin('MergeCells').mergedCellsCollection.mergedCells;
5.热加载data 或者 设置项:
this.$refs.table.hotInstance.loadData(this.data);
this.$refs.table.hotInstance.updateSettings({mergeCells: mergeData});
6.语言切换:
import 'handsontable/languages'
在hotSetting中添加
language: 'zh-CN',
更多推荐
已为社区贡献1条内容
所有评论(0)