element的table组件根据后端返回数字渲染成文字记录

利用table组件的插槽功能把数据传递到方法中就可以实现

只需要定义一个转换方法就可以渲染到dom上

<el-table-column label="交易类型" prop="use_type">

        <template slot-scope="{row}">

          {{ transformNum(row.use_type) }}

        </template>

      </el-table-column>

transformNum方法

假如返回值为3则渲染为账期支付...

 transformNum(num){
      switch (num) {
        case 3:
        return '账期支付'
        case 4:
        return '退款入账'
        case 5:
        return '账期还款'
      }
    },

el-table-column 里面可以直接嵌套router-link使用slot-scope

  <el-table>
  <el-table-column label="订单" width="240">
        <router-link
          v-if="scope.row.order.order_sn"
          tag="span"
          :to="`${scope.row.order_id}`"
          class="id"
          slot-scope="scope"
        >{{scope.row.order}}</router-link>
        <span v-else>无</span>
   </el-table-column>
   </el-table>

利用js对象键值对的方法也可以实现,在数据库中定义一个对象

<view class="line line_3">
	<view class="left">交易类型:<text>{{propObj[item.use_type]}}</text></view>
</view>
propObj: {
		3: '账期支付',
		4: '退款入账',
		5: '账期还款'
}

ps:初学者记录一下!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值