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

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

2024-07-08 09:07:12 前端知识 前端哥 199 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
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

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