el-table-column中添加template的v-if判断导致表格数据不显示

本文讨论了在使用 Vue.js 的 Element UI 框架时遇到的一个表格数据不显示的问题。问题源于在 `el-table-column` 中使用 `v-for` 和条件渲染的不当结合。通过将条件渲染移到外部模板并为不同类型的列创建单独的 `el-table-column` 元素,成功解决了这个问题,确保了表格数据的正常显示。这是一个关于 Vue.js 前端开发中组件使用和错误排查的实例。
摘要由CSDN通过智能技术生成
<el-table-column v-for="(column, index) in tableConfig"
            :key="index"
            :prop="column.prop"
            :label="column.label"
            :width="column.width?column.width:undefined"
            :min-width="column.minWidth"
            :fixed="column.fixed"
            :show-overflow-tooltip="true" 
  >
    <template slot-scope="scope" v-if="!column.type">
         <el-checkbox :value="scope.row[column.prop]==1"></el-checkbox>
    </template>
</el-table-column>

如上面代码会导致表格数据不显示

修改为如下代码,则正常显示

<template v-for="(column, index) in tableConfig">
          <el-table-column
            :key="index"
            :prop="column.prop"
            :label="column.label"
            :width="column.width?column.width:undefined"
            :min-width="column.minWidth"
            :fixed="column.fixed"
            :show-overflow-tooltip="true" v-if="!column.type"
          ></el-table-column>
          <el-table-column
            :key="index"
            :prop="column.prop"
            :label="column.label"
            :width="column.width?column.width:undefined"
            :min-width="column.minWidth"
            :fixed="column.fixed"
            :show-overflow-tooltip="true" v-if="column.type=='checkbox'"
          >
            <template slot-scope="scope" >
                <el-checkbox :value="scope.row[column.prop]==1"></el-checkbox>
            </template>
          </el-table-column>
        </template>

如有其他方案,欢迎评论区交流

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值