美文网首页
element-ui el-table 自定义字体颜色快捷复

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

作者: 异乡人丶 | 来源:发表于2018-11-16 15:15 被阅读0次

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

        <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://img.haomeiwen.com/i1416460/ae7af8e8fb9cc04e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

# 完成后的效果
![QQ图片20181116150707.png](https://img.haomeiwen.com/i1416460/b7d727bece1f6c9c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

相关文章

网友评论

      本文标题:element-ui el-table 自定义字体颜色快捷复

      本文链接:https://www.haomeiwen.com/subject/wndmfqtx.html