vue根据数字状态显示对应的文字状态

原创已于 2022-06-21 15:11:56 修改 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2022-06-21 15:08:49 首次发布

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用Element UI的table组件，通过模板插槽实现根据订单状态显示不同文案。展示了如何根据不同order_state值，动态呈现'待发货'、'待收货'等状态，适合前端开发者理解与实践。

<template slot-scope="scope"> slot-scope="scope"代表插槽的意思，这里 scope 代表行 data。scope.row取整行数据

<el-table-column
      label="交易状态">
      <template slot-scope="scope">
            {{
              scope.row.order_state== 1
                ? "待发货"
                : scope.row.order_state== 2
                ? "待收货"
                : scope.row.order_state== 3
                ? "代付款"
                : scope.row.order_state== 4
                ? "已完成"
                : scope.row.order_state == 5
                ? "已取消"
                : ""
            }}
      </template>
    </el-table-column>