在使用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 ,来进行匹配,如果是则匹配,否则则输出原值。