You should not mix ‘v-for‘ with ‘v-if‘

Write the following code:

<el-table-column
  v-for="(th, key) in tableHeader"
  v-if="!checkNotAnyAuth(th)"
  :key="key"
  :prop="th.prop"
  :label="th.label"
  :fixed="th.fixed"
  :min-width="th.minWidth"
  :width="th.width"
  align="center"
  element-loading-text="拼命加载中"
>

Write the code to save, and report an error after running:
The 'tableHeader' 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'

As shown in the figure:

Chinese means:The'tableHeader' variable in the'v-for' instruction should be replaced with a calculated attribute, returning the filtered array. You should not mix v-for and v-if together

We can understand it as:

During project development, an error was reported due to the use of both v-for and v-if instructions on the same label.

Reason: v-for的优先级会高于v-if，因此v-if会重复运行在每个v-for中
Disadvantages:这样重复的运算会消耗计算机性能，降低浏览器加载速度，在开发过程中应该尽量避浏览器开不必要性能的消耗

We can write like this: use the template tag to wrap (template is a new tag of html5, no special meaning)

<template v-for="(th, key) in tableHeader">
  <el-table-column
	  v-if="!checkNotAnyAuth(th)"
	  :key="key"
	  :prop="th.prop"
	  :label="th.label"
	  :fixed="th.fixed"
	  :min-width="th.minWidth"
	  :width="th.width"
	  align="center"
	  element-loading-text="拼命加载中"
	> 
	</el-table-column>    
</template>

note:key值写el-table-column标签里面

This solves the problem of error and performance loss when using v-for and v-if.
Finally, all friends are welcome to leave a message or click to follow. I will update my technical blog from time to time in the future. At the same time, you can privately trust me when you encounter problems, and we can solve them together!