Vue+Element UI踩坑之动态显示隐藏表格的列‘el-table-column‘

Vue+Element UI踩坑之动态显示/隐藏表格的列’el-table-column’

• 在el-table-column上使用v-show绑定是无效果的

• 所以我将v-show改为v-if

• 但是进过几次切换显示/隐藏后，发现表格的排版完全乱了

• 例：原本期望在末尾的列，居然跑到前面了

​ 解决方案：给每一个el-table-column标签上都加一个key="index"

<el-table :data="data">
	<el-table-column label="姓名" key="1">
		<template slot-scope="scope" v-if="!isAuditReferee">
			<span>{{ scope.row.name }}</span>
		</template>
	</el-table-column>
	<el-table-column label="手机号码" v-if="isAuditReferee" key="2">
		<template slot-scope="scope">
			<span>{{ scope.row.phone }}</span>
		</template>
	</el-table-column>
	<el-table-column label="性别" v-if="!isAuditReferee" key="3">
		<template slot-scope="scope">
			<span>{{ scope.row.sex }}</span>
		</template>
	</el-table-column>
</el-table>