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

1. el-table 空白列赋值

对el-table中未传数据存在空白的列赋默认值0。使用el-table 提供的插槽 slot-scope:{{ row || '0' }}

原数据:

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

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

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

原数据:

html 复制代码
<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>

问题解决:

相关推荐
_风满楼1 小时前
TDD实战-会议室冲突检测的红绿重构循环
前端·javascript·算法
Rkgua1 小时前
JS中的惰性函数基本介绍
前端·javascript
客场消音器1 小时前
我用两周半 Vibe Coding 做了一个前额叶训练的微信小程序
前端·javascript·后端
azhou的代码园3 小时前
基于SpringBoot+Vue的家教小程序
vue.js·spring boot·小程序·毕业设计·家教小程序
不考研当牛马3 小时前
HTML CSS 新手大全初学者必看 (含有部分 JavaScript)
javascript·css·html
卷帘依旧3 小时前
Promise链式调用原理
前端·javascript
threelab4 小时前
Three.js 图像粒子飞线效果 | 三维可视化 / AI 提示词
开发语言·javascript·人工智能
anyup4 小时前
全面重构的 uni-app 多平台上传组件,功能强到离谱!
前端·vue.js·uni-app
Mr数据杨5 小时前
【Codex】用PPT文案额外描述优化课件生成细节
java·javascript·django·powerpoint·codex·项目开发
WebGirl5 小时前
【Vue3】withDefaults和defineProps设置默认值
vue.js