vue，计算属性传参， computed ,根据值不同，渲染相应的内容

最新推荐文章于 2025-05-29 10:11:45 发布

一个柠檬

最新推荐文章于 2025-05-29 10:11:45 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 vue笔记

本文链接：https://blog.youkuaiyun.com/A13330069275/article/details/84822203

前端同时被 2 个专栏收录

106 篇文章

订阅专栏

vue笔记

38 篇文章

订阅专栏

本文介绍如何使用Vue框架中的表格组件来根据不同状态显示特定的标签颜色。通过计算属性实现状态名称转换，使申请状态一目了然。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


     <el-table-column prop="status" label="申请状态">
        <template slot-scope="scope">
          <el-tag
            :type="getApplyStatus(scope)"
            disable-transitions
          >{{ getStatusName(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>


computed: {
    getStatusName: function() {
      // `this` points to the vm instance
      return function(status) {
        if(status === '0'){
          return '未审核'
        }else if( status === '1') {
          return '已审核'
        }else if ( status === '2') {
          return '审核未通过'
        }
      };
    }
  },