在使用element-ui的table的時候，后台返回的字段比如性別，返回sex:0，需要前端展示的時候自己匹配為漢字，展示方法有2種：
方法一：
<el-table-column prop="sex" :formatter="formatter" align="left" show-overflow-tooltip label="性別" width="150"></el-table-column>
methods: {
formatter(row, column) {
return
row.sex === 1?
"男"
:
"女"
;
}
},
方法二：
<el-table-column prop="sex" :formatter="getPartnerName" align="left" show-overflow-tooltip label="性別" width="150">
<template slot-scope="scope">
<span>{{ formatter(scope.row.sex)}}</span>
</template>
</el-table-column>
methods: {
formatter(row, column) {
return
row.sex === 1?
"男"
:
"女"
;
}
如果是有很多數據，之后想要在循環中使用匹配，該怎么使用呢？可以搭配v-if 搭配方法二進行
<el-table-column
v-for="item in columns"
v-bind:label="item.text"
v-bind:key="item.id"
:prop="item.prop"
:width="item.width"
>
<template slot-scope="scope">
<span v-if="scope.column.property === 'isMenu'">{{ sexFormatter(scope.row.isMenu)}}</span>
<span v-else>{{scope.row[scope.column.property]}}</span>
</template>
</el-table-column>
methods: {
sexF
ormatter(row, column) {
return
row.sex === 1?
"男"
:
"女"
;
}
通過判斷當前行的 property ，來進行匹配，如果是則匹配，否則則輸出原值。