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
    },

总结

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

相关文章

  • 简单的vuex 的使用案例笔记

    简单的vuex 的使用案例笔记

    这篇文章主要介绍了简单的vuex 的使用案例笔记,本文通过demo 是一个 改变 app 的模式 的一个appellation ,选择是 夜间模式还是白天模式,具体代码大家参考下本文
    2018-04-04
  • Vue3+Element Plus的项目搭建过程详解

    Vue3+Element Plus的项目搭建过程详解

    这篇文章主要为大家介绍了Vue3+Element Plus的项目搭建过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 使用Vue进行数据可视化实践分享

    使用Vue进行数据可视化实践分享

    在当今的数据驱动时代,数据可视化变得越来越重要,它能够帮助我们更直观地理解数据,从而做出更好的决策,在这篇博客中,我们将探索如何使用 Vue 和一些常见的图表库(如 Chart.js)来制作漂亮的数据可视化效果,需要的朋友可以参考下
    2024-10-10
  • 十分钟封装一个好用的axios步骤示例

    十分钟封装一个好用的axios步骤示例

    这篇文章主要为大家介绍了十分钟封装一个好用的axios步骤示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • vue中子组件调用兄弟组件方法

    vue中子组件调用兄弟组件方法

    这篇文章主要介绍了vue中子组件调用兄弟组件方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue.js双向绑定操作技巧(初级入门)

    Vue.js双向绑定操作技巧(初级入门)

    这篇文章主要介绍了Vue.js双向绑定操作技巧(初级入门)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • vue调用swiper插件步骤教程(最易理解且详细)

    vue调用swiper插件步骤教程(最易理解且详细)

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理,下面这篇文章主要给大家介绍了关于vue调用swiper插件的相关资料,需要的朋友可以参考下
    2023-04-04
  • Vue中 Vue.prototype使用详解

    Vue中 Vue.prototype使用详解

    本文将结合实例代码,介绍Vue中 Vue.prototype使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • vue3中keep-alive和vue-router的结合使用方式

    vue3中keep-alive和vue-router的结合使用方式

    这篇文章主要介绍了vue3中keep-alive和vue-router的结合使用方式, 具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 关于Vue在ie10下空白页的debug小结

    关于Vue在ie10下空白页的debug小结

    这篇文章主要给大家介绍了关于Vue在ie10下空白页的debug相关资料,这是最近在工作中遇到的一个问题,通过查找相关的资料终于解决了,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-05-05

最新评论