el-tag的类型转换

最新推荐文章于 2025-04-23 11:20:16 发布

Byfar_

最新推荐文章于 2025-04-23 11:20:16 发布

阅读量3.4k

点赞数 2

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_42107267/article/details/106498903

版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了两种在Element UI中实现el-tag类型转换的方法，包括详细步骤和实践操作，帮助理解如何动态改变tag的展示样式和功能。

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

方法一【element】：

<el-table-column label="状态"
                  prop="enabled"
                  :filters="[{ text: '启用', value: '启用' }, { text: '关闭', value: '关闭' }]"
                  :filter-method="filterTag"
                  filter-placement="bottom-end"
 >
   <template slot-scope="scope">
     <el-tag
       :type="onlineMap[scope.row.enabled] === '启用' ? 'success' : 'danger'"
       disable-transitions
     >{{ onlineMap[scope.row.enabled] }}</el-tag>
   </template>
   <!-- <template slot-scope="props">
     {{ onlineMap[props.row.enabled] }}
   </template> -->
 </el-table-column>

  onlineMap: {
    true: '启用',
    false: '关闭'
  }

方法二：

<el-table-column align="center" label="上报状态" width="70">
   <template slot-scope="scope">
      <el-tag :type="scope.row.state | statusFilter">{{ scope.row.state | formatStata }}</el-tag>
   </template>
 </el-table-column>

  filters: {
    // el-tag类型转换
    statusFilter(status) {
      const statusMap = {
        0: 'info',
        1: 'success',
        2: 'warning',
        3: 'danger'
      }
      return statusMap[status]
    },
    // 状态显示转换
    formatStata(status) {
      const statusMap = {
        0: '全部',
        1: '正常',
        2: '离线',
        3: '未部署'
      }
      return statusMap[status]
    }
  },

在这里插入图片描述