element组件中el-table表格中根据状态显示icon样式的方法

一钱一

已于 2023-05-23 15:21:48 修改

阅读量1.5k

点赞数

文章标签： vue.js 前端 elementui

于 2023-01-04 16:53:44 首次发布

本文链接：https://blog.csdn.net/weixin_69677630/article/details/128549934

版权

文章介绍了两种在ElementUI的el-table组件中根据状态显示不同icon样式的实现方式。第一种方法是通过使用`statusStyle`方法动态绑定class，第二种方法是利用Vue的`v-if`和`v-else`结构切换class。状态类如.status-0,.status-1,和.status-2分别对应不同的颜色。

摘要由CSDN通过智能技术生成

element组件中el-table表格中根据状态显示icon样式的方法

// 第一种
 <el-table-column prop="Status" label="状态">
    <template slot-scope="{ row }">
       <span :class="statusStyle(row.Status)">   {{ row.Status }}</span>
    </template>
 </el-table-column>

methods: {       
   statusStyle(Status) {     
    return Status === 1 ? 'status-1 el-icon-circle-check' : Status === 0? 'status-0 el-icon-refresh' : Status === 2 ? 'status-2 el-icon-circle-close' : 'status-1 el-icon-circle-check'
     }
  }

// 第二种
 <el-table-column prop="Status" label="状态">
    <template slot-scope="{ row }"
       <span v-if="row.Status === 1">
       <div class="status-1 el-icon-circle-check" /></span>
      <span v-else><div class="status-2 el-icon-circle-close" /></span>{{ row.Status }}
    </template>
</el-table-column>
    
    

.status-0{
  color: #FF9D26;
}
.status-1{
  color: #67C23A;
}
.status-2{
  color: #F56C6C;
}