Vue项目Element表格对应字段映射显示方法:formatter格式化数据问题
作者:无忧好奇猫
这篇文章主要介绍了Vue项目Element表格对应字段映射显示方法:formatter格式化数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目Element表格对应字段映射显示:formatter格式化数据
需求:
- 表格中会员性别字段的值是"0"时显示"男",值是"1"时显示"女"
在标签内加: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 : ''; }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。