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>

问题解决:

相关推荐
bearpping1 分钟前
Nginx 配置:alias 和 root 的区别
前端·javascript·nginx
@大迁世界23 分钟前
07.React 中的 createRoot 方法是什么?它具体如何运作?
前端·javascript·react.js·前端框架·ecmascript
颜酱1 小时前
DFS 岛屿系列题全解析
javascript·后端·算法
战南诚2 小时前
VUE中,keep-alive组件与钩子函数的生命周期
前端·vue.js
霍理迪2 小时前
Vue的响应式和生命周期
前端·javascript·vue.js
竹林8185 小时前
在Web3前端用Node.js子进程批量校验钱包,我踩了这些性能与安全的坑
javascript·node.js
Kel7 小时前
深入剖析 openai-node 源码:一个工业级 TypeScript SDK 的架构之美
javascript·人工智能·架构
SuperEugene8 小时前
Vue3 模板语法规范实战:v-if/v-for 不混用 + 表达式精简,避坑指南|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架
Luna-player8 小时前
Vue 3 + Vue Router 的路由配置,简单示例
前端·javascript·vue.js