vue3中的vue-18n的table表格标题不动态变化中英文
使用 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表格标题不动态变化中英文的更多相关文章
- Vue3学习(十一)之 table表格组件的使用
一.前言 大约有两周没学习更文,不是懒,而是没心情,相亲路屡战屡败,着实很影响心情. 我想这世上对我而言,最难的事,莫过于恋爱结婚了,再一次经历了见光死的高光时刻. 二.又见Ant Design Vu ...
- 封装Vue Element的table表格组件
上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
- vue+element-ui:table表格中的slot 、formatter属性
slot 插槽,table中表示该行内容以自定义方式展示 :formatter 方法,用来格式化内容 Function(row, column, cellValue, index) html < ...
- vue + element ui table表格二次封装 常用功能
因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data=&qu ...
- 封装Vue Element的可编辑table表格组件
前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...
- 封装Vue纵向表头左右结构的table表格
我们前端开发人员在使用表格的过程中,大概率碰到的都是表格头部在表格的最上边,然后呈一行展示,紧接着就是表格的每一行的每一个单元格来展示具体内容的场景,很少会遇到表格的头部呈纵向一行展示,也就是说表格的 ...
- vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
- Vue之循环遍历Json数据,填充Table表格
简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
随机推荐
- Python将信息发送到指定邮箱
目的:将Python执行脚本结果发送到指定邮箱 使用场景:可将每天.每周定时任务python跑的结果汇总,定时发送到小组成员/领导邮箱中 1.以下163邮箱为例,设置发件人是163邮箱,接收人是qq邮 ...
- 【SpringMVC】12 文件上传和下载
编写一个请求上传和下载的JSP页面 <%@ page contentType="text/html;charset=UTF-8" language="java&qu ...
- 【Vue】Re17 Router 第四部分(参数传递,守卫函数)
一.案例搭建 新建Profile组件 组件写好内容后配置路由 { path : '/profile', component : () => import('../components/Profi ...
- 安装wsl的必备操作——开启CPU虚拟化——WslRegisterDistribution failed with error_ 0x8007019e 0x800701b 0x80370102 请启用虚拟机平台
参考: https://www.cnblogs.com/smdtxz/p/16837946.html https://www.cnblogs.com/wenonly/p/17206040.html h ...
- springcloud线上发布超时之grpc
springcloud线上发布超时系列文章: springcloud线上发布超时之feign(ribbon饥饿加载) springcloud线上发布超时之grpc springcloud线上发布超时方 ...
- 2023 ICPC 合肥游记
board zsy 11.24 开始嗓子疼了,但可以忍受.晚上睡的很不舒服 11.25 起床就开始难受,还得骑车到地铁站,应该打个车来着.不过路上拍到了很好看的朝霞(写到这里才想起来还没发朋友圈给 t ...
- 5 个有趣的 Python 开源项目「GitHub 热点速览」
本期,我从上周的开源热搜项目中精心挑选了 5 个有趣.好玩的 Python 开源项目. 首先是 PyScript,它可以让你直接在浏览器中运行 Python 代码,不仅支持在 HTML 中嵌入,还能安 ...
- Linux系统性能调优技巧
Linux系统性能调优是一个复杂而细致的过程,它涉及到硬件.软件.配置.监控和调优策略等多个方面.以下将详细阐述Linux系统性能调优的技巧: 一.硬件优化 CPU优化 选择适合的CPU:根据应用需求 ...
- Seata 1.3.0 ERROR i.s.c.r.n.NettyClientChannelManager -no available service 'null' found, please make sure registry config correct
根据个人经验,报这个错误是因为nacos里并没有同步seata的config导致的 配置文档:https://www.bookstack.cn/read/seata-1.3.0/4b2f4de4831 ...
- JS之AMD、CMD、CommonJS、ES6、UMD的使用笔记
前言 如下图: AMD与CMD的主要区别: 1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行.不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同). ...