Vue 中el-table-column 进行循环,页面没渲染成功

文章目录


前言

实现效果:el-table-column 进行循环,使之代码简化

遇到的问题: data进行默认赋值,操作列的删除都可以出来,其他表格里面的数据没出来


效果图

示例:

代码示例

cpp 复制代码
<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col>
                <div>数据条数: {{ recycleBinList.length }}</div>
                <el-table v-loading="loading" :data="recycleBinList" border style="width: 100%">
                    <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop"
                        :label="column.label" align="center" :show-overflow-tooltip="true">
                        <template v-if="column.prop === 'caozuo'" slot-scope="scope">
                            <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                                删除
                            </el-button>
                        </template>
                        <template v-else slot-scope="scope">
                            {{ scope.row[column.prop] }} <!-- 显示其他列的数据 -->
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "configAll",
    data() {
        return {
            columns: [
                { width: '200px', label: '编号', prop: 'numberID' },
                { width: 'auto', label: '唯一ID', prop: 'id' },
                { width: '150px', label: '操作', prop: 'caozuo' },
            ],
            loading: false,
            recycleBinList: [
                {
                    numberID: 1, id: 1, fileName: '111'
                }
            ],
        };
    },
    created() {
        console.log('组件 created 钩子执行',this.recycleBinList);
    },
    mounted() {
        console.log('组件 mounted 钩子执行',this.recycleBinList);
    },
};
</script>

看这个这个代码分析了半天才发现

可能出现的问题及原因

作用域理解混淆:

slot-scope用于在插槽中获取父组件传递过来的数据,它创建了一个特定的作用域,而v-if是基于 Vue 的响应式数据进行条件判断来决定元素是否渲染。当同时使用时,如果对它们各自的作用域以及数据的响应式变化机制理解不清楚,就容易出现渲染不符合预期的情况。

例如,在v-if判断中使用的变量,可能在slot-scope的作用域内不存在或者其值的变化没有被正确地监测到,导致元素渲染或隐藏的逻辑出现错误。
渲染顺序问题:

Vue 在解析模板时,对于v-if和插槽(包含slot-scope)的处理顺序可能会影响最终的渲染结果。如果v-if的条件判断依赖于插槽内传递的数据,而插槽数据的传递和解析顺序出现问题,就可能导致v-if的判断不准确,进而影响数据的正确渲染。

解决思路

明确作用域和数据来源:

仔细梳理slot-scope中接收到的数据结构以及在v-if判断中使用的变量来源。确保v-if中使用的变量是在slot-scope作用域内能够正确获取到的,并且是响应式的数据(如果需要响应式变化的话)。

cpp 复制代码
 <template slot-scope="scope">
    <div v-if="isCaozuoColumn(column.prop)">
       <el-button size="small" type="danger" @click="handleDelete(scope.row)">
              删除
                </el-button>
       </div>
    <div v-else>
   {{ scope.row[column.prop] }}
       </div>
     </template>```

总而言之:就是  ** slot-scope和v-if同时使用** 导致的数据渲染问题

**Ending...**
相关推荐
掘金安东尼4 分钟前
官方:什么是 Vite+?
前端·javascript·vue.js
柒崽6 分钟前
ios移动端浏览器,vh高度和页面实际高度不匹配的解决方案
前端
渣哥22 分钟前
你以为 Bean 只是 new 出来?Spring BeanFactory 背后的秘密让人惊讶
javascript·后端·面试
烛阴30 分钟前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua
大猫会长40 分钟前
tailwindcss出现could not determine executable to run
前端·tailwindcss
Moonbit44 分钟前
MoonBit Pearls Vol.10:prettyprinter:使用函数组合解决结构化数据打印问题
前端·后端·程序员
533_1 小时前
[css] border 渐变
前端·css
云中雾丽1 小时前
flutter的dart语言和JavaScript的消息循环机制的异同
前端
地方地方1 小时前
Vue依赖注入:provide/inject 问题解析与最佳实践
前端·javascript·面试
云中雾丽1 小时前
dart的继承和消息循环机制
前端