让vue-excel-editor数据网格显示中文：localized-label本地化与表格样式定制完整配置

让vue-excel-editor数据网格显示中文localized-label本地化与表格样式定制完整配置【免费下载链接】vue-excel-editorVue2 plugin for displaying and editing the array-of-object in Excel style项目地址: https://gitcode.com/gh_mirrors/vu/vue-excel-editorvue-excel-editor 是一款 Vue2 数据网格插件支持 Excel 风格地显示和编辑对象数组。它的默认文案全部是英文分页按钮、过滤面板、提示语都是本文手把手教你用localized-label属性把整个数据网格界面中文化并通过row-style、cell-style等属性完成表格样式定制一篇讲透数据表格的本地化与美化配置。 认识 vue-excel-editor 数据网格先快速了解这个插件的定位Excel 风格界面行选择、列排序、列过滤、单元格编辑一应俱全真实双向数据绑定v-model直接绑定对象数组Array of Object丰富的表格样式控制行样式、单元格样式、只读样式、初始样式均可定制内置本地化机制所有界面文案集中在一个对象里整体替换即可中文化安装和注册非常简单npm install vue-excel-editorimport Vue from vue import VueExcelEditor from vue-excel-editor Vue.use(VueExcelEditor)一个最简模板网格会自动猜出所有列vue-excel-editor v-modeljsondata vue-excel-column fieldname label姓名 typestring width150px / vue-excel-column fieldage label年龄 typenumber width70px / /vue-excel-editor 注意区分两类文字列头label由你自己写在vue-excel-column里天生可以写中文而分页、过滤面板、状态提示这些界面文案才是localized-label要解决的部分。 localized-label 本地化配置完整步骤第一步找到组件默认的英文文案所有默认英文文案都写在组件源码的属性默认值里参考 VueExcelEditor.vue 中localizedLabel的定义共 30 来个键覆盖以下 4 个区域区域文案位置关键键名分页页脚底部状态栏footerLeft、first、previous、next、last、footerRight表格设定面板左上角≡按钮弹出tableSetting、exportExcel、importExcel、reset、back过滤/排序面板列头下拉sortingAndFiltering、sortAscending、sortDescending、apply提示与报错空数据、校验提示processing、noRecordIndicator、columnHasValidationError第二步写一份中文标签对象只需要覆盖你想改的键其余自动回退到英文默认值。一份实用的中文最小集data () { return { zhLabels: { footerLeft: (top, bottom, total) 记录 ${top} 至 ${bottom}共 ${total} 条, first: 首页, previous: 上一页, next: 下一页, last: 尾页, footerRight: { selected: 已选, filtered: 已过滤, loaded: 已加载 }, processing: 处理中, tableSetting: 表格设置, exportExcel: 导出 Excel, importExcel: 导入 Excel, back: 返回, reset: 恢复默认, sortingAndFiltering: 排序与过滤, sortAscending: 升序, sortDescending: 降序, apply: 应用, noRecordIndicator: 暂无记录 } } }注意footerLeft、columnHasValidationError等键是函数而不是字符串会接收参数并返回文案中文对象里同样用函数形式即可。第三步把对象传给数据网格组件vue-excel-editor v-modeljsondata :localized-labelzhLabels ... /vue-excel-editor到这一步分页页脚、表格设定面板、过滤面板、空数据提示就全部变成中文了。⚠️ 小提醒localized-label同时会传递给三个子面板组件——过滤面板PanelFilter.vue、设定面板PanelSetting.vue、查找面板PanelFind.vue见 PanelSetting.vue所以只需要在父组件上配置一次不要重复传。 表格样式定制四种样式属性一次配齐vue-excel-editor 提供 4 个正交的样式入口分别控制不同粒度的外观1.row-style整行条件着色行级接收一个函数参数为当前行记录返回 CSS 对象。适合做条件格式:row-style(rec) rec.age 18 ? { background: #fff3cd } : {}比如把所有未成年记录整行标黄一眼识别异常数据。2.cell-style单元格条件着色单元格级比row-style更细能同时拿到记录和列定义:cell-style(rec, field) rec[field.name] ? { background: #f8d7da, color: #c00 } : {}空值标红、金额超阈值加粗这类需求都靠它。3.readonly-style只读单元格统一样式配合列级readonly属性使用给整列的只读单元格统一锁住的观感vue-excel-editor :readonly-style{ background: #e9ecef } vue-excel-column fieldcode label编码 readonly / /vue-excel-editor4.init-style单列单元格初始样式列级写死某列的默认外观比如金额列右对齐、等宽字体vue-excel-column fieldamount label金额 :init-style{ textAlign: right, fontFamily: Consolas } / 四者合并优先级init-style→readonly-style只读列追加再叠加row-style/cell-style的返回值。想全局微调主题色也可以直接基于根节点类名.vue-excel-editor写自己的 CSS 覆盖默认主题色是rgb(108, 143, 108)的绿色边框见 VueExcelEditor.vue 中的style块。️ 进阶header-label 动态修改列头文字vue-excel-column的label在组件挂载后不再变化。若需要动态改列头比如切换语言后列头也要变用header-label函数属性vue-excel-editor :header-label(label, field) field.label 姓名 ? 客户姓名 : label另一个官方技巧是直接改fields变量再强制刷新参考 VueExcelColumn.vue 中列渲染逻辑this.$refs.grid.fields.forEach(field { if (field.name col23) field.label 产品 }) this.$forceUpdate() 中文配置速查清单目标用什么一句话说明列头显示中文label属性写在每个vue-excel-column上页脚/面板中文化localized-label只覆盖需要的键即可空值提示暂无记录noRecordIndicator过滤后 0 条时显示整行条件格式row-style函数返回行级 CSS单元格条件格式cell-style函数返回单元格级 CSS只读列统一底色readonly-style对象形式配合列级readonly单列固定外观init-style列属性适合金额/日期列❓ 常见问题Q1传了localized-label但界面上还有英文只会被你覆盖的键变成中文没写的键自动回退英文。对照源码 VueExcelEditor.vue 的默认对象把需要的键补全即可。Q2想让每个浏览器记住用户调整的列宽怎么办加一个remember属性列宽和列可见性会自动存进 localStorage属于样式体验的记忆能力。Q3Vue3 项目能用吗本文的localized-label配置思路通用但 Vue3 版本请改用vue3-excel-editor插件其 props 基本一致。按上面的步骤配好你的数据网格就同时拥有了中文界面和贴合业务主题的表格样式。完整属性表page、filter-row、autocomplete等 20 余项都在 README.md 的 Props List 章节里可作为日常查阅手册。【免费下载链接】vue-excel-editorVue2 plugin for displaying and editing the array-of-object in Excel style项目地址: https://gitcode.com/gh_mirrors/vu/vue-excel-editor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考