Bootstrap

el-table-column格式化显示内容

写需求的时候碰到了记录一下。要对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
      }
    },
;