强大的handsontable表格可以实现类似excel一样的编辑,最近vue项目中有用到,正在熟悉它的配置。我所说的汉化,主要是对于右键菜单的,汉化完的结果如下:
第一步:我开始只是想设置右键菜单为中文,配置 contextMenu 项类似这样,一级菜单没问题了,可是二级菜单没有汉化:
第二步:尝试继续完善contextMenu配置,添加子菜单:
contextMenu: {
items: {
"row_above": {
name: '向上插入一行',
},
"row_below": {
name: '向下插入一行',
},
"col_left": {
name: '向左插入一列',
},
"col_right": {
name: '向右插入一列',
},
"remove_row": {
name: '删除行',
},
"remove_col": {
name: '删除列',
},
"merge_cell": {
name: '合并单元格',
},
"alignment": {
name: '对齐',
submenu: { 这里就是我新增的子菜单配置/
items: [
{
key: "alignment:left",
name: '左对齐',
},
{
key: "alignment:center",
name: '水平居中'
},
{
key: "alignment:right",
name: '右对齐'
},
{
key: "alignment:justify",
name: '两端对齐'
},
{name: "---------"},
{
key: "alignment:top",
name: '顶端对齐'
},
{
key: "alignment:middle",
name: '垂直居中'
},
{
key: "alignment:bottom",
name: '底端对齐'
}
]
}
},
"copy": {
name: '复制',
},
"cut": {
name: '剪切',
}
},
}
哇塞,二级菜单真的被我汉化了,貌似没问题了呀!
—— too young too simple! 二级菜单的默认事件不起作用了,不信你试试:设置某个单元格右对齐、垂直居中等等试试,一点反应都没有。所有,我这样对subMenu的配置是有问题的,name是汉化了,事件也被覆盖了,具体原因,我一时找不出来,有会的亲,欢迎留言告诉我,先谢谢啦~
第三步:于是乎,我翻看文档想到了汉化,官方文档请见:
https://docs.handsontable.com/pro/3.0.0/tutorial-internationalization.html
按照文档说的引入:
import 'handsontable/languages/zh-CN'; //引入中文语言包
...
language: 'zh-CN', //声明用中文的语言包
contextMenu: [
"row_above",
"row_below",
"col_left",
"col_right",
"---------",
"remove_row",
"remove_col",
"---------",
"alignment",
"copy",
"cut",
"mergeCells"
],
总结:我觉得官网的汉化比我自己翻译得好,如果你们觉得自己翻译的更准确,仍然可以自定义语言包。