Bootstrap

vue+element实现el-table-column列字段界面翻译及日期格式化

       通常在项目中要进行大量的数据查询且界面显示的内容要是翻译后的值或需要格式化成指定格式,这其中查询速度是个比较头疼的问题,如果所有列在查询的过程中后台翻译好了再传到前端界面显示,那势必查询速度很慢,本人在项目中就遇到了这个问题,那怎么解决这个问题呢?
       经过分析研究,查询element-ui官网el-table的相关api发现,其实可以借助 el-table-column 其自带的 formatter 属性加以改造实现界面字段翻译,省时省力,还通用。下面先上实现代码:

<el-table-column  label="材料" prop="material" align="center" min-width="150" show-overflow-tooltip 
:formatter="((row,column)=>{return gDatasFormatter(row,column,shellMaterialOpts)})">
</el-table-column>

      上图中代码 :formatter="((row,column)=>{return gDatasFormatter(row,column,shellMaterialOpts)})" 就是今天要说的重点,重构了formatter属性的方法,自己传入对应列的字典数组数据 

;