Vue - ElementUI中循环渲染表格，控制字段的显示与隐藏 v-if与v-for同时使用

最新推荐文章于 2025-03-05 19:16:47 发布

我没受刺激啊

最新推荐文章于 2025-03-05 19:16:47 发布

阅读量1.5w

点赞数 8

分类专栏： ElementUI 文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_44583625/article/details/93162611

版权

ElementUI 专栏收录该内容

4 篇文章

订阅专栏

博客主要讲述在Vue里循环数组/对象时，若同时使用某些操作会提示用计算属性，虽能正常使用但Vue不提倡。作者项目中也遇此问题，通过翻看文档解决，修改方法是用标签包裹，将相关内容写在特定位置并绑定到需循环元素上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue中使用v-for循环一个数组/对象时，如果再使用v-if，那么会提示使用计算属性(能正常使用)，因为Vue中是不提倡v-for与v-if同时使用的。
在我的项目中也遇到了问题
不过翻看文档解决了
修改前：

<el-table-column
	v-for="(item, index) in columns"
	:prop="item.prop" 
	:key="index" 
	align="center"
	:width="item.width"
	:label="item.label"
	v-if="item.show"
>
></el-table-column>

编辑器提示：vue/no-use-v-if-with-v-for] The 'columns' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.eslint-plugin-vue

修改后：

<template v-for="(item, index) in columns">
	<el-table-column
		:prop="item.prop" 
		:key="index" 
		align="center"
		:width="item.width || '' "
		:label="item.label"
		v-if="item.show"
	>
	</el-table-column>
</template>