首页 前端知识 element的table组件根据后端返回数字渲染成文字记录

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

2024-07-08 09:07:12 前端知识 前端哥 185 47 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13870.html
标签
评论
发布的文章

html左右两栏布局实现

2024-08-04 00:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!