今天刚开始使用handsontable，但是结果不尽人意。最后的总结：通过这段时间的使用，觉得该组件提供的文档使用很不方便（把毕生所学的原生js都用上了，太难啦/(ㄒoㄒ)/~~），最终决定不使用该插件了。
1.在表格中实现操作列的效果，点击dropdown的某一项可以获取到该行的数据进行逻辑处理：
实现过程如下（参照文档地址：https://handsontable.com/docs/vue-hot-column/#declaring-a-custom-renderer-as-a-component）
HelloHandSonTable.vue
<template>
<div>
<hot-table :settings="hotSettings">
<hot-column :width="50"></hot-column>
<hot-column :width="150">
<operation-dropdown hot-renderer>
</operation-dropdown>
</hot-column>
</hot-table>
</div>
</template>
<script>
import { HotTable, HotColumn } from '@handsontable/vue';
import OperationDropdown from "@/components/OperationDropdown.vue"
import Handsontable from 'handsontable';
export default {
name: 'HelloHandSonTable',
data () {
return {
hotSettings: {
data: Handsontable.helper.createSpreadsheetData(6, 10),
colHeaders: true,
height: 'auto',
licenseKey: 'non-commercial-and-evaluation'
}
}
},
components: {
HotTable,
HotColumn,
OperationDropDown
}
}
</script>
OperationDropdown.vue
<template>
<div>
<el-dropdown @command="handleCommand" trigger="click">
<el-button type="primary">
操作<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeHandleCommand(hotInstance,row, 'edit')">编辑</el-dropdown-item>
<el-dropdown-item :command="beforeHandleCommand(hotInstance,row, 'delete')">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
name:"OperationDropdown",
data() {
return {
hotInstance: null,
TD: null,
row: null,
col: null,
prop: null,
value: null,
cellProperties: null
}
},
methods:{
beforeHandleCommand(hotInstance,row, command) {
return {
hotInstance: hotInstance,
row,
command: command,
};
},
handleCommand(cmd) {
switch (cmd.command) {
case 'edit':
console.log(cmd.hotInstance.getDataAtRow(cmd.row),"edit","sry")
break
case 'delete':
// 代码块
break
default:
// 默认代码块
}
}
}
}
</script>
2.改变列样式
一种方式通过cells:
另外一种方式：
3.点击单元格事件及获取单元格的数据
4.国际化
import 'handsontable/dist/languages/zh-CN.js' //引入handsontable语言包
5.合并表头
目前研究的结果是：合并表头只能合并列，不能合并行，效果如下（不太符合我的期望）：
实现代码如下：
6.编辑表格
通过添加钩子函数记录编辑过的数据
