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>

问题解决:

相关推荐
Van_Moonlight5 分钟前
RN for OpenHarmony 实战 TodoList 项目:任务完成进度条
javascript·开源·harmonyos
Van_Moonlight13 分钟前
RN for OpenHarmony 实战 TodoList 项目:深色浅色主题切换
javascript·开源·harmonyos
小贵子的博客15 分钟前
Ant Design Vue <a-table>
前端·javascript·vue.js·anti-design-vue
天天进步201518 分钟前
【Nanobrowser源码分析4】交互篇: 从指令到动作:模拟点击、滚动与输入的底层实现
开发语言·javascript·ecmascript
console.log('npc')24 分钟前
vue2中子组件父组件的修改参数
开发语言·前端·javascript
Van_captain31 分钟前
rn_for_openharmony常用组件_Chip纸片
javascript·开源·harmonyos
奋斗吧程序媛43 分钟前
vue3 Study(1)
前端·javascript·vue.js
QQ12958455041 小时前
ThingsBoard - APP首页修改为手工选择组织
前端·javascript·物联网·iot
whyfail1 小时前
前端数据存储新选择:IndexedDB与Dexie.js技术指南
前端·javascript·数据库
椰果uu1 小时前
vue-virtual-scroller-虚拟滚动列表:渲染不定高度长列表+可控跳转
前端·javascript·typescript·vue