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:初学者记录一下!

猜你喜欢

转载自blog.csdn.net/m0_70373529/article/details/130621510