element-ui el-table 自定义字体颜色快捷复用方法

第一步:自定义模板把后台返回的参数传入以下方法中

        <template slot-scope="scope">
          <span v-html="getinfo(status['_'+scope.row.auditStatus],scope.row.auditStatus,true)"></span>
        </template>
      </el-table-column>  ```
#v-html 中方法如下  methods 中使用 
```getinfo(item,key,isalert){   // 审核状态 和 项目类型
            if(item){
                if(isalert){
                   return `<span style="color:${item.color}" key="${key}">${item.title}</span>`
                }
                   return `<span style="color:${item.color}" key="${key}">${item.title}</span>`
            }else{
              return ''
            }
        } ```
#然后在data return 中 定义自定义颜色
  ``` status:{      // 审核状态信息
              _1:{title:'待审核',color:'rgb(255,215,0)'},
              _2:{title:'已审核',color:'rgb(50,205,50)'},
              _3:{title:'驳回',color:'rgb(220,220,220)'},
              _4:{title:'下线',color:'rgb(255,0,0)'},
              _5:{title:'删除',color:'rgb(0,0,0)'}
            },```


##以下是完整页面HTML代码

![image.png](https://upload-images.jianshu.io/upload_images/1416460-ae7af8e8fb9cc04e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

# 完成后的效果
![QQ图片20181116150707.png](https://upload-images.jianshu.io/upload_images/1416460-b7d727bece1f6c9c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 14,779评论 0 15
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,104评论 3 119
  • 2018年2月28日晚,我不顾家人的反对来到上海找工作,刚来上海我借住我同学宿舍,白天去面试,晚上住在她哪,面试了...
    小狸猫_2890阅读 3,754评论 6 7
  • 在电视上看到一句广告词,“老家河南”,脑海里总会浮现一个小小村庄的影像。 那里没有山清水秀,没有名胜古迹,有的是剪...
    风铃和风筝阅读 4,560评论 8 21
  • 中学时代结束,我的体重在高三暑假直接奔向160去了。即将升大二的我放暑假,麻麻开门问我你是谁?邻居问爸妈她是谁? ...
    适口工作室阅读 3,184评论 0 1

友情链接更多精彩内容