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

最新推荐文章于 2024-05-22 10:17:12 发布

好耶

最新推荐文章于 2024-05-22 10:17:12 发布

阅读量1.7k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46229508/article/details/128241395

版权

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