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

最新推荐文章于 2024-08-21 16:41:56 发布

Pingy_de

最新推荐文章于 2024-08-21 16:41:56 发布

阅读量3.7k

点赞数 1

分类专栏： VUE 前端文章标签： vue

本文链接：https://blog.csdn.net/Pingy_de/article/details/124120704

版权

VUE 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

本文讨论了在使用 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>

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