antd vue 中表格得customRender渲染中使用过滤器filters

问题描述

在业务开发中,有时候对于时间处理,可能不是全部都要时分秒得显示,这里我使用vue得过滤器,然后就出现一个毛病,我是在表头定义得时候,直接使用得customRender渲染得,普通得过滤器是通过 | 来实现,那么这里怎么处理呢

问题解决

使用-> this.$options.filters.过滤器名字(参数)

代码

  • 全局定义过滤器
	import Vue from 'vue'
	import moment from 'moment'
	// 定义一个全局过滤器
	Vue.filter('minFormat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm') {
	  return moment(dataStr).format(pattern)
	})
  • 使用
// 这里是表头定义
tableColumns: [
     {
       title: '更新时间',
       dataIndex: 'updatedTime',
       customRender: (text) => {
         return (
           <div>
             { this.$options.filters.minFormat(text) } // 在这里直接如此调用即可,有点像调用方法得样子
           </div>
         )
       }
     }
   ]

效果

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐