el-table-column根据值来转化为自定义表达

最新推荐文章于 2026-08-19 16:18:33 发布

原创最新推荐文章于 2026-08-19 16:18:33 发布 · 3.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端VUE

当前文章被收录于：

前端VUE

5 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍在Vue项目中，如何利用el-table-column根据后台返回的数据（如0/1）自定义转化为前端友好的显示方式，例如将数字转化为'初级'或'高级'等文字描述。

最近使用VUE的时候为了方便在数据库中存储的类型（type）为0/1 但是在前端页面中却需要用初级/高级来表示。

正常在el-table-column 中显示值，

<!-- 此处的prop就是数据绑定的属性，-->
<el-table-column prop="type" label="班课类型"></el-table-column>

采用下面代码可以转化为自定义的值

<el-table-column  label="班课类型" width="70">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 0">初级班</span>//此处经过测试，不能使用===，最好使用==
            <span v-else>高级班</span>
          </template>
        </el-table-column>