这篇博客介绍了如何在Vue.js应用中创建并使用自定义格式化函数`idToName`，该函数用于根据指定的ID在数据列表中查找对应的名字。在`main.js`中全局注册后，`idToName`函数可以在任何组件中使用。在示例中，它被用作`el-table-column`的`formatter`属性，将部门ID转换为部门名称。这展示了Vue如何结合数据处理和组件渲染来提升用户体验。
formatUtils.vue
<script type="text/javascript">
function idToName(id, idCol, nameCol, dataList){
if (id == null || id == '' || id == 0) return '';
if (dataList == null || dataList.length <= 0) return '';
for (var i = 0; i < dataList.length; i++) {
if (dataList[i][idCol] == id){
return dataList[i][nameCol];
}
}
return '';
}
export default {
idToName
}
</script>
在main.js里面声明，全局可用
import formatUtils from '@/utils/formatUtils.vue'
Vue.prototype.formatUtils = formatUtils;
在vue中使用
<el-table-column prop="deptid" label="部门" width="110" align="center" :formatter="deptToName"/>
deptToName:function(row, column){
return this.formatUtils.idToName(row.deptid,'id','deptname',this.deptList);
},
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
