Vue数据格式化,:formatter的使用

场景:需要将数据(id)转变成另一种数据(name)显示出来
代码
1.加入:formatter方法

<el-table-column prop="scopeId" label="大类" align="center" :formatter="scopeIdFormat" width="auto" />

2.方法逻辑

methods:{
   //大类显示对应状态
    scopeIdFormat(row, column, cellValue){
        let a = this.signscopes.filter((x)=> x.id == row.scopeId );  //筛选对应值
        return a[0].signScope;  //返回值
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,`:formatter`是一个属性,用于对表格中的数据进行格式化处理。它可以将原始数据转换为特定的文字或格式。通过在需要处理的行中加入`:formatter`属性,并指定相应的格式化方法,我们可以实现对数据的转换。例如,在使用ElementUI表格时,可以在`<el-table-column>`标签中使用`:formatter`属性来指定相应的格式化方法。比如,可以使用`formatProtocolType`方法来格式化`protocolType`字段的值。具体的代码如下: ``` <el-table-column prop="protocolType" label="协议类型" :formatter="formatProtocolType"></el-table-column> ``` 其中,`formatProtocolType`是一个方法,用于将原始的`protocolType`字段的值转换为相应的文字形式。在方法中,可以使用`switch`语句或其他逻辑来实现具体的转换。类似地,我们还可以在其他需要进行数据格式化处理的地方使用`:formatter`属性来指定对应的方法。引用 引用 。 另外,如果需要处理的转换内容较少或不希望使用方法来进行处理,还可以直接在模板中使用解构表达式来实现转换。例如,在`<el-table-column>`标签中使用`slot-scope`来获取当前行的数据,并直接在模板中根据对应的字段值进行转换。具体的代码如下: ``` <el-table-column label="性别限制"> <template slot-scope="scope"> <span style="margin-left: 10px">{{["无限制", "男", "女"][scope.row.genderConstraint}}</span> </template> </el-table-column> ``` 上述代码中,使用了解构表达式`scope.row.genderConstraint`来获取当前行的`genderConstraint`字段的值,并将其作为索引来获取对应的转换后的文字。这种方式更简单直接,适用于处理转换内容较少的情况。引用 。 总之,`:formatter`是在Vue中用于数据格式化处理的属性,可以根据具体需求选择使用方法或解构表达式来实现数据转换。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue数据格式化,:formatter使用](https://blog.csdn.net/qq_43378800/article/details/111500680)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vueformatter使用方法](https://blog.csdn.net/qq_41378597/article/details/104333259)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值