Element-UI el-table对循环产生的空白列赋默认值方式

 更新时间:2024年03月01日 08:41:54   作者:小雅痞  
这篇文章主要介绍了Element-UI el-table对循环产生的空白列赋默认值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Element-UI el-table对循环产生的空白列赋默认值

el-table 空白列赋值

对el-table中未传数据存在空白的列赋默认值0。

使用el-table 提供的插槽 slot-scope:{{ row || '0' }}

原数据:

图1

<el-table-column label="集镇"  :prop=city >
     <template slot-scope="{row}">
         {{ row || '0' }}
       </template>
</el-table-column>

el-table 对循环产生的空白列赋值

对于循环产生的列,仍要赋默认值0,可采用以下方式: {{ row[col.city] || '0' }}

原数据:

图2

<template v-for="col in cols">
   <el-table-column :label=col.label>
     <el-table-column label="集镇" :prop=col.city >
       <template slot-scope="{row}">
         {{ row[col.city] || '0' }}
       </template>
     </el-table-column>
     <el-table-column label="农村" :prop=col.village>
       <template slot-scope="{row}">
         {{ row[col.village] || '0' }}
       </template>
     </el-table-column>       
   </el-table-column>
</template>

问题解决:

el-table内容为空,设置默认值 效果

方法一:通过css设置

/deep/.el-table {
  .cell:empty::before {
    content: "---";
    color: #ccc;
  }
  .is-leaf {
    .cell:empty::before {
      content: "---";
      color: #ccc;
    }
  }
}

方法二:过滤

el-table-column里使用:formatter

<el-table-column
        prop="caseTypeNames"
        label="类型"
        :formatter="caseTypeNamesFormat"
      >
</el-table-column>
    // 类型格式化
    caseTypeNamesFormat (row) {
      let showProp = null
      row.caseTypeNames ? showProp = row.caseTypeNames : showProp = '---'
      return showProp
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3.0报错Cannot find module‘worker_threads‘的解决办法

    vue3.0报错Cannot find module‘worker_threads‘的解决办法

    这篇文章介绍了vue3.0报错Cannot find module‘worker_threads‘的解决办法。对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • 关于Vue中的计算属性和监听属性详解

    关于Vue中的计算属性和监听属性详解

    这篇文章主要介绍了关于Vue中的计算属性和监听属性详解,Vue.js模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板内放入过长的或复杂的逻辑时,会让模板过重且难以维护,需要的朋友可以参考下
    2023-05-05
  • 本地部署element-plus文档的简单步骤

    本地部署element-plus文档的简单步骤

    由于公司网络登element-ui官方文档很慢,想把他载下来离线文档本地跑,下面这篇文章主要给大家介绍了关于本地部署element-plus文档的简单步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • VUE获取Promise对象中PromiseResult中的数据(最新推荐)

    VUE获取Promise对象中PromiseResult中的数据(最新推荐)

    如果想要在接口请求方法的外面拿到请求的结果,再做相关数据处理,往往我们拿到的却是一个Promise对象,那么遇到这样的问题如何解决呢,下面小编给大家带来了VUE 项目中 如何获取Promise对象中的PromiseResult中的数据 ,感兴趣的朋友一起看看吧
    2023-10-10
  • 基于Vue3实现鼠标滑动和滚轮控制的轮播

    基于Vue3实现鼠标滑动和滚轮控制的轮播

    在这篇文章主要为大家详细介绍了如何一步步地实现一个基于 Vue 3 的轮播组件,这个组件的特点是可以通过鼠标滑动和滚轮来控制轮播图的切换,感兴趣的可以了解下
    2024-02-02
  • vue中遇到scrollIntoView无效问题及解决

    vue中遇到scrollIntoView无效问题及解决

    这篇文章主要介绍了vue中遇到scrollIntoView无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • VUE的数据代理与事件详解

    VUE的数据代理与事件详解

    这篇文章主要为大家介绍了VUE的数据代理与事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vuex actions 异步操作方法详解

    Vuex actions 异步操作方法详解

    这篇文章主要介绍了Vuex actions 异步操作方法,需要的朋友可以参考下
    2023-10-10
  • 基于ant design日期控件使用_仅月份的操作

    基于ant design日期控件使用_仅月份的操作

    这篇文章主要介绍了基于ant design日期控件使用_仅月份的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 详解Vue+axios+Node+express实现文件上传(用户头像上传)

    详解Vue+axios+Node+express实现文件上传(用户头像上传)

    这篇文章主要介绍了详解Vue+axios+Node+express实现文件上传(用户头像上传),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论