vue中formatter的使用方法

Dear 丶 2023-10-07 06:17 9阅读 0赞

## 一、需求描述 ##

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

## 二、使用: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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020021519443719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3,size_16,color_FFFFFF,t_70