el-table-column列展示布尔值

前端使用vue element-ui 时,经常会用到 table 来展示从后台请求回来的数据,
但是,如果被请求回来数据是 Boolean 类型的时候,在table的列上,不会被展示出来,展示的是空。
这个时候,我们需要做的就是对布尔值数据进行格式的转化。

1、前端加入代码

前端加入代码 :formatter="formatBoolean" :show-overflow-tooltip="true" 

 <el-table-column prop="is_admin" label="Admin" width="120" :formatter="formatBoolean"  />

2、新增转化方法
在methods写入方法formatBoolean
每一行都会触发这个方法,row为table那一行数据保存的对象,index为索引

        methods: {
            formatBoolean: function (row, index) {
                var ret = ''
                if (row.is_admin == true) {
                    ret = "yes" //根据自己的需求设定
                } else {
                    ret = "no"
                }
                return ret;
            },
            ...
            ...
            ...
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容