The data returned by vue+element ui background is a number, and the front desk is converted into the corresponding Chinese and displayed in the table

Regarding the display of the corresponding text according to the background numbers, there is no detailed description in the document, so write this blog to record it.

Here are three main methods, you can choose according to your own needs.

Let’s put a rendering first (explain first that 0 means yes, 1 means no)

 Method 1: Call the method in methods

<el-table-column 
    prop="isAccept" 
    label="是否接受" 
    show-overflow-tooltip
    :formatter="formtype">
</el-table-column>

methods:{
    formtype(cellValue){
        if (cellValue == 0){
            return '否';
        }else if (cellValue == 1){
            return '是';
        };
    },
},

Method 2: Judging by v-if

<el-table-column prop="isAccept" label="是否接受">	
    <template slot-scope="scope">
        <span v-if="scope.row.isAccept== 0">否</span>
        <span v-if="scope.row.isAccept== 1">是</span>
        <span v-if="scope.row.isAccept== 2">--</span>
    </template>
</el-table-column>

Method 3: Judging by the ternary operator

<el-table-column prop="isAccept" label="是否接受">
    <template slot-scope="scope">
        {
   
   { scope.row.isAccept == 1 ? "是" : "否" }}
    </template>
</el-table-column>