使用 computed 即可

eg:

const columns = computed(() => {
return reactive<any>([
{
title: proxy.$t('device.pm.table.index'),
dataIndex: 'index',
width: 50,
slotName: 'indexsort',
ellipsis: true,
tooltip: true,
},
{
title: proxy.$t('device.pm.table.deviceName'),
dataIndex: 'deviceName',
width: 100,
ellipsis: true,
tooltip: true,
},
{
title: proxy.$t('device.pm.table.departmentName'),
dataIndex: 'departmentName',
slotName: 'depName',
width: 200,
ellipsis: true,
tooltip: true,
},
{
title: proxy.$t('device.pm.table.deviceTypeName'),
dataIndex: 'deviceTypeName',
width: 100,
ellipsis: true,
tooltip: true,
},
{
title: proxy.$t('device.pm.table.manufacturerName'),
dataIndex: 'manufacturerName',
width: 100,
ellipsis: true,
tooltip: true,
},
{
title: proxy.$t('device.pm.table.modelNumber'),
dataIndex: 'modelNumber',
width: 100,
ellipsis: true,
tooltip: true,
},
{
title: proxy.$t('device.pm.table.reminderTime'),
dataIndex: 'reminderTime',
width: 150,
ellipsis: true,
tooltip: true,
},
{
title: proxy.$t('device.pm.table.period'),
dataIndex: 'period',
width: 100,
ellipsis: true,
tooltip: true,
},
{
title: proxy.$t('device.pm.table.countdown'),
dataIndex: 'countdown',
width: 110,
ellipsis: true,
tooltip: true,
},
{
title: proxy.$t('operate'),
width: 200,
align: 'center',
dataIndex: 'manufacturerName',
slotName: 'operation',
ellipsis: true,
tooltip: true,
fixed: 'right',
},
]);
})

vue3中的vue-18n的table表格标题不动态变化中英文的更多相关文章

  1. Vue3学习(十一)之 table表格组件的使用

    一.前言 大约有两周没学习更文,不是懒,而是没心情,相亲路屡战屡败,着实很影响心情. 我想这世上对我而言,最难的事,莫过于恋爱结婚了,再一次经历了见光死的高光时刻. 二.又见Ant Design Vu ...

  2. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

  3. html中table表格标题固定表数据行出现滚动条

    需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...

  4. vue+element-ui:table表格中的slot 、formatter属性

    slot 插槽,table中表示该行内容以自定义方式展示 :formatter 方法,用来格式化内容 Function(row, column, cellValue, index) html < ...

  5. vue + element ui table表格二次封装 常用功能

    因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data=&qu ...

  6. 封装Vue Element的可编辑table表格组件

    前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...

  7. 封装Vue纵向表头左右结构的table表格

    我们前端开发人员在使用表格的过程中,大概率碰到的都是表格头部在表格的最上边,然后呈一行展示,紧接着就是表格的每一行的每一个单元格来展示具体内容的场景,很少会遇到表格的头部呈纵向一行展示,也就是说表格的 ...

  8. vue+iview中的table表格导出excel表格

    一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...

  9. Vue之循环遍历Json数据,填充Table表格

    简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...

  10. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

随机推荐

  1. Jmeter二次开发函数 - 将指定时间转换为时间戳

    1.达到效果:在jmeter的函数助手增加一个"timeStamp"函数,调用"timeStamp"函数可以将用户传入的时间转换为时间戳. 2.eclipse项 ...

  2. 【DataBase】MySQL 03 基本命令 & 语法规范

    参考至视频:P12 - P15 https://www.bilibili.com/video/BV1xW411u7ax?p=82 SHOW 和相关的基本命令 查看所有的数据库 SHOW DATABAS ...

  3. 【SpringBoot】07 探索配置方式 Part3 多环境配置

    1.按多个Profile文件来配置 SpringBoot默认会使用第一个 我们可以在默认的application.properties中设置激活哪种环境配置 profile的命名规则 2.按Yml可以 ...

  4. 电脑时间不同步导致的上网报错:core/proxy/vmess/encoding: failed to read response header > websocket: close 1006 (abnormal closure): unexpected EOF

    报错内容: 2023/12/16 14:08:56 [Warning] [775541588] xxxxx.com/core/app/proxyman/outbound: failed to proc ...

  5. 简单设计一个JAVA并行处理工具类

    在工作中,我们肯定遇到过一个接口要处理N多事项导致接口响应速度很慢的情况,通常我们会综合使用两种方式来提升接口响应速度 优化查询SQL,提升查询效率 开启多线程并发处理业务数据 这里讨论第二种方案:使 ...

  6. Ruoyi-Cloud 启动失败的坑,关于 selectConfigList

    刚才编辑了一堆,不知道为啥加了个英文单词,当前页面刷新自动搜索了单词,之前的内容总的就是现在都要会SpringCloud,高并发,几个真正懂高并发的,问题一般项目也没有啥高并发.自己之前的项目遇到过高 ...

  7. 关于Vue + element plus包装Component理解

    关于Vue + element plus包装Component理解 一.关于编写思路 我以设计el-select选择框进行举例说明 父组件与Component传递params与Function使用Pr ...

  8. 原生js操作dom的总结

    一.学习DOM之前需要知道的 1.什么是window? window:是一个全局对象, 代表浏览器中一个打开的窗口, 每个窗口都是一个window对象 2.什么是document?         d ...

  9. maven3.x上传jar

    由于工作需要,将原有的nexus2.x升级为nexus3.x,升级后创建仓库是非常方便,但是该如何将本地的jar上传到maven仓库呢?这个博主就像无头的苍蝇找了好久,才终于找到解决方案.下面描述下该 ...

  10. 使用 prefetchComponents 进行组件预取

    title: 使用 prefetchComponents 进行组件预取 date: 2024/8/17 updated: 2024/8/17 author: cmdragon excerpt: 摘要: ...