美文网首页
el-table-column列展示布尔值

el-table-column列展示布尔值

作者: BestFei | 来源:发表于2021-08-27 16:19 被阅读0次

前端使用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;
            },
            ...
            ...
            ...
        }

相关文章

网友评论

      本文标题:el-table-column列展示布尔值

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