elementUI vue 在table中根据不同数据实现不同的tag

首先我们要实现的效果如下

一般来讲  我们在后台构造数据的时候都是要用一个flag值来规定该字段的状态 如图

寻找开发文档 可以找到一个这样的demo

所以查看源码可以知道 我们关键点在于el-tag标签处

 

于是可以按照demo照猫画虎的写道自己的代码之中

html

javascript

 

 filters: {
            //tag类型
            getBindStatus(bindStatus) {
                const bindColor = {
                    0: 'danger',
                    1: 'success',

                };
                return bindColor[bindStatus]
            },
            //颜色名称
            getBindText(bindStatus) {
                const bindColor= {
                    0: '未关联设备',
                    1: '已关联设备',

                };
                return bindColor[bindStatus]
            }


        },

我们在el-tag标签中   设定两个过滤器  一个过滤器过滤颜色  一个过滤器过滤文本

这样  设置好过滤器便可以获取到自己想要tag标签效果了