el-table-column列展示布尔值

2021-08-27  本文已影响0人  BestFei

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

猜你喜欢

热点阅读