首页 > 其他分享 >vue3中的vue-18n的table表格标题不动态变化中英文

vue3中的vue-18n的table表格标题不动态变化中英文

时间:2023-11-13 19:56:53浏览次数:32  
标签:vue title ellipsis 18n tooltip dataIndex vue3 table true

使用 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',
  },
]);
})

 

标签:vue,title,ellipsis,18n,tooltip,dataIndex,vue3,table,true
From: https://www.cnblogs.com/zhulongxu/p/17829984.html

相关文章

  • vue的虚拟dom渲染真实dom的过程中首先会对新老VNode的开始和结束位置进行标记:oldStart
    关于Vue中的diff算法说法错误的是()A比较只会在同层级节点进行比较,不会跨层级比较B在diff比较的过程中,循环从两边向中间收拢。Cvue的虚拟dom渲染真实dom的过程中首先会对新老VNode的开始和结束位置进行标记:oldStartIdx、oldEndIdx、newStartIdx、newEndIdxD当老VNode节......
  • router其实是VueRouter的一个实例,所以它是一个全局对象,包含了所有的子对象和属性
    router其实是VueRouter的一个实例,所以它是一个全局对象,包含了所有的子对象和属性而route是正在跳转的这个路由的局部对象,可以获取这个正在跳转的路由的name,path,params,query等this.$router全局的路由对象,options.routes包括所有的路由路径,this.$router.push()this.$rout......
  • Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmedia
    下列关于Vue的描述错误的是()A当给某个组件修改某个值时,该组件不会立即重新渲染BVue内部使用原生Promise.then、MutationObserver和setImmediate实现异步队列,不会采用setTimeout(fn,0)C$nextTick()返回一个Promise对象D$nextTick()可以配合async/await使用正确答案:B官......
  • Object.defineProperty(obj,key,val)不可以监听数组变化,需要做特殊处理,所以Vue3.0使用
    关于Vue双向数据绑定说法错误的是()AVue实现双向数据绑定是采用数据劫持和发布者-订阅者模式BObject.defineProperty(obj,key,val)可以监听数组变化,不需要做特殊处理CVue2.0数据劫持是利用ES5的Object.defineProperty(obj,key,val)方法来劫持每个属性的getter和setterD......
  • Vue怎么监听路由参数的变化?
    有两种方法可以监听路由参数的变化,但是只能用在包含<router-view/>的组件内第一种用侦听器监听watch:{ '$route'(to,from){ //在此处监听 },},第二种在路由守卫种监听beforeRouteUpdate(to,from,next){ //这里监听}......
  • vuejs3.0 从入门到精通——Vuex 4.x —— Getter
    Vuex4.x——Getterhttps://vuex.vuejs.org/zh/guide/getters.html 有时候我们需要从store中的state中派生出一些状态,例如对列表进行过滤并计数:computed:{doneTodosCount(){returnthis.$store.state.todos.filter(todo=>todo.done).length}} 如......
  • Vue中如何在有传参的情况下传入默认参数event
    <el-buttontype='primary'@click='handleSearch("kkk",$event)'>我是默认参数</el-button>点击查看代码handleSearch(val,e){ if(e){ /*默认参数*/ }}想要在传递参数的基础上添加默认参数,在vue中要使用$event来代替......
  • [转载]:npm create vite@latest 和 npm init vue@latest 的区别
    1.npmcreatevite@latest:使用Vite构建工具创建项目模板。Vite是一个现代化的前端构建工具,用于快速搭建现代化的Vue、React或者原生JavaScript项目。通过该命令创建的项目模板具有现代化的构建特性,如快速的热模块替换、即时的开发服务器、基于ES模块的构建等,能够提供......
  • vuejs3.0 从入门到精通——Vuex 4.x —— state
    Vuex4.x——statehttps://vuex.vuejs.org/zh/guide/state.html一、单一状态树 Vuex使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源(SSOT)”而存在。这也意味着,每个应用将仅仅包含一个store实例。单一状......
  • vuejs3.0 从入门到精通——Vuex
    Vuexhttps://vuex.vuejs.org/zh/一、Vue是什么? Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。1.1、什么是"状态管理模式"? 状态管理模式是一种在前端开发中管理......