写需求的时候碰到了记录一下。要对el-table-column的显示进行处理。
有些需求简单一点,不需要逻辑处理,比如下面代码的优惠那列,需求是当没有优惠时显示-,有优惠时显示多少元。解决方法是插槽和v-if判断。详细见以下代码。
复杂一点的需求是对距离做处理,<1km的显示多少米,>1km的就显示几点几公里,因为后端本身返回的就是‘0.0公里‘这种字符串,所以要前端进行处理。在距离的el-table-column上添加:formatter=‘logisticDescData’。
<el-table :data="deliveryTypeTable" @selection-change='checkNumChange($event)'>
<el-table-column prop="logisticName" label="配送方式"></el-table-column>
<el-table-column prop="logisticDesc" label="距离" :formatter='logisticDescData'></el-table-column>
<el-table-column prop="coupons_amount" label="优惠">
<template slot-scope="scope">
<span v-if="scope.row.coupons_amount!==0">{{scope.row.coupons_amount}}元</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column prop="delivery_fee" label="价格">
<template slot-scope="scope">{{scope.row.delivery_fee+'元'}}</template>
</el-table-column>
<el-table-column :reserve-selection="true" type="selection"></el-table-column>
</el-table>
然后在logisticDescData里进行逻辑处理,把获取的字符串转成数字,处理好return回去就行。
// 距离小于1000显示米
logisticDescData (row) {
let numLogisticDesc = parseInt(row.logisticDesc) * 1000
if (numLogisticDesc < 1000) {
return numLogisticDesc + '米'
} else {
return row.logisticDesc
}
},