vue中formatter的使用方法

一、需求描述

我们平时接收到后台传来的数据是某种状态码,或者数字标识,需要我们在前端将其转换为对应的内容。
如图所示,其实我们接收到的标识是0、1、2。将其转换成女,男,无限制。
在这里插入图片描述

二、使用:formatter

我们可以使用:formatter,代码如下。
prop对应你要取的值,:formatter对应方法。注意不要忘了冒号。

 <el-table
            :data="recruitmentList"
            :default-sort="{prop: 'date', order: 'descending'}"
            fit
            style="width: 100%">
             <el-table-column
                label="性别要求" prop="genderConstraint" :formatter="typeFormatter">
             </el-table-column>
 </el-table>
 data() {
            return {
                recruitmentList: []
            }
        },
  metho,ds: {
            typeFormatter: function (row) {
                switch (row.genderConstraint) {
                    case 0:
                        return "无限制";
                    case 1:
                        return "男";
                    case 2:
                        return "女";
                }
            }
        }

三、其他处理方式

如果你需要处理转换的内容不多,或者嫌这样麻烦,你可以直接这么写,利用解构表达式,代码如下。

 <el-table-column  label="性别限制">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{["无限制", "男", "女"][scope.row.genderConstraint]}}</span>
            </template>
 </el-table-column>

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:猿与汪的秘密 设计师:我叫白小胖 返回首页
评论 2

打赏作者

Evan Wang

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值