美文网首页
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