SoFunction
Updated on 2025-03-08

Vue+ElementUI trapped in dynamic display/hide column el-table-column problem of table

Dynamically show/hide the columns of tables el-table-column

  • Using v-show binding on el-table-column is of no effect
  • So I changed v-show to v-if
  • However, after switching to show/hide several times, I found that the layout of the table was completely messy
  • Example: The column originally expected to be at the end actually ran to the front

​Solution

Add one to each el-table-column tagkey="index"

<el-table :data="data">
	<el-table-column label="Name" key="1">
		<template slot-scope="scope" v-if="!isAuditReferee">
			<span>{{  }}</span>
		</template>
	</el-table-column>
	<el-table-column label="phone number" v-if="isAuditReferee" key="2">
		<template slot-scope="scope">
			<span>{{  }}</span>
		</template>
	</el-table-column>
	<el-table-column label="gender" v-if="!isAuditReferee" key="3">
		<template slot-scope="scope">
			<span>{{  }}</span>
		</template>
	</el-table-column>
</el-table>

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.