vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Element表格对应字段映射显示:formatter格式化数据

Vue项目Element表格对应字段映射显示方法:formatter格式化数据问题

作者:无忧好奇猫

这篇文章主要介绍了Vue项目Element表格对应字段映射显示方法:formatter格式化数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue项目Element表格对应字段映射显示:formatter格式化数据

需求:

在标签内加:formatter="item.formatter"属性

<el-table-column 
 v-for="item in tableColumns" 
:key="item.value" 
:prop="item.value" 
:align="item.align" 
:label="item.label" 
:formatter="item.formatter" >        
</el-table-column>

在要遍历的数据后面加一个formatter方法

formatter: function(row,column,value,index) {
  if (value == '0') {
      return "男"
  }else if (value == '1') {
      return '女'
  }
}

el-table带其它参数的formatter格式化数据显示

el-table中使用带默认参数的formatter格式化数据显示

<el-table-column class="input-width" label="运营单位" prop="corpId" min-width="120" :formatter="formatCorp" />
 
formatCorp(row) {
    return this.corpList.length > 0 && row.corpId ? this.corpList.find((item) => item.corpNo == row.corpId).corpName : '';
}

el-table中使用带其它参数的formatter格式化数据显示

<el-table-column label="运营单位" prop="corpId" min-width="120" :formatter="(row, column) => formatCorp(row, column, corpList)" />
 
formatCorp(row, column, corpList) {
    return corpList.length > 0 && row.corpId ? corpList.find((item) => item.corpNo == row.corpId).corpName : '';
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文