Element-ui table中tag显示不同颜色

效果图

 

 

组件template中：
<el-table-column :label="$t('epmlang.epmInfo.sPMStatus')" class-name="status-col" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.sPMStatus | statusFilter">
            {{ scope.row.sPMStatus }}
          </el-tag>
        </template>
      </el-table-column>

js

复制代码
 filters: {
    // el-tag类型转换
    statusFilter(status) {
      const statusMap = {
        PM: 'info',
        IDEL: 'danger',
        BUYOFF: 'success'
      }
      console.log(statusMap[status])
      return statusMap[status]
    }
  },
复制代码

 

 

button demo

filters 使用

 

 

 

复制代码
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <!-- vue -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- element引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- element引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!--Axios-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
  <div id="App">
    <el-button type="primary" @click.prevent.stop="but1">
      button
    </el-button>
    
      <el-table :data="tableData" style="width: 100%"  :row-class-name="tableRowClassName">
      
      <el-table-column label="日期" align="center" >
        <template slot-scope="{row}">{{ row.date }} </template>
      </el-table-column>
<!--       <el-table-column label="姓名" align="center" >
        <template slot-scope="{row}">{{ row.name }} </template>
      </el-table-column> -->
      
      <el-table-column label="姓名" align="center" >
        <template slot-scope="{row}" >
        <!--row.name 传进来  ，走过滤的逻辑 -->
          <el-button :type="row.name | statusFilter"  circle> </el-button>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" >
        <template slot-scope="{row}" >
        <!--row.name 传进来  ，走过滤的逻辑 -->
          <el-button :type="row.a | statusFilter"  circle> </el-button>
        </template>    
      </el-table-column>
      <el-table-column label="姓名" align="center" >
        <template slot-scope="{row}" >
        <!--row.name 传进来  ，走过滤的逻辑 -->
          <el-button :type="row.b | statusFilter"  circle> </el-button>
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center" >
        <template slot-scope="{row}">{{ row.address }} </template>
      </el-table-column>
    

    
  </div>
</body>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  
.el-button:hover {
    background: #126c9e !important;
    color: white !important;
    font-weight: bold;
    border-color: #01a8f9 !important;
  }

}
</style>
<script>
  var vm = new Vue({
    el: "#App",
    filters: {
    // button type 过滤
    statusFilter(status) {
      const statusMap = {
        王: 'warning',
        小: '',
        虎: 'success',
        的: 'danger'
      }
      return statusMap[status]
    }
  },
    data: {
      flag: '有',
      visible: false,
      tableData: [{
          date: '2016-05-02',
          name: '王',
          a: '虎',
          b: '王',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '小',
          a: '王',
          b: '小',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '虎',
          a: '的',
          b: '王',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '的',
          a: '小',
          b: '王',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
    },
    created() {
    },
    methods: {
    // 行颜色，没用
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
//
    }
  })
</script>

</html>
复制代码

 

posted @   浅绿色i  阅读(2267)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae