Vue 中，使用 v-for 和 v-if 在同一个元素上时，出现报错，怎么解决

直接上报错图：

上图所示，其实就是 因为 v-for 的优先级比 v-if 高，Vue 会先尝试遍历 v-for 里面，然后再检查 v-if 的条件，这可能会导致意外的行为或错误。

解决办法有两种：

1.常见办法，也就是编辑器提醒的，使用 template 包裹 v-for ，优先 v-if

<template><el-table><template v-if="approveInfo"><el-table-column v-for="item in plusRatio" :key="item" :prop="item.prop" :label="item.label"><!-- 列的内容 --></el-table-column></template></el-table>
</template>

首先判断 approveInfo 的值，只有当 approveInfo 为 true 时，才会渲染 template 内部的元素。

2.使用计算属性来过滤数据

<template><el-table><el-table-column v-for="item in filteredPlusRatio" :key="item" :prop="item.prop" :label="item.label"><!-- 列的内容 --></el-table-column></el-table>
</template><script>
export default {data() {return {approveInfo: true,plusRatio: [{ prop: 'ratio1', label: '比例 1' },{ prop: 'ratio2', label: '比例 2' },// 其他数据]};},computed: {filteredPlusRatio() {if (this.approveInfo) {return this.plusRatio;} else {return [];}}}
};
</script>

根据 approveInfo 的值决定是否返回 plusRatio 数组或空数组，确保只有在 approveInfo 为 true 时才渲染 el-table-column。

注意点

1. 避免在 v-for 内部使用 v-if，因为 v-for 优先级高，会导致不必要的性能开销。
2. 计算属性会根据依赖的响应式数据自动更新，确保逻辑的正确性。