在element表格中使用template绑定数据时同时使用v-if发生的奇怪的事情

背景

想实现在同一页面的通过一个属性pageType来切换两个表格的渲染，同时表格中使用了<template>来获取row数据进行一些操作，但是通过<template>绑定数据的列会渲染到另外的表格里，代码说话：

//表格1当pageType=a时渲染
<el-table
v-if="pageType==='a'" 
:data:tableList1>
//第一列用prop绑定数据（不会产生影响）
	<el-table-column
	lable="列1.1"
	prop="column1">
	</el-table-column>
//第二列用template绑定以在点击事件中获取该行数据（影响列2.2）
	<el-table-column
	lable="列1.2">
	<template solt-scope="scope">
		<el-button type="text" @click="del(scope.row)">删除</el-button>
	</template>
	</el-table-column>
//第三列用template绑定数据对数值做判断以渲染不同的文字（影响列2.3）	
	<el-table-column
	lable="列1.3">
	<template solt-scope="scope">
		{{scope.row.status==='0'?'开启':'关闭'}}
	</template>
	</el-table-column>
</el-table>

//表格2当pageType=b时渲染
<el-table
v-if="pageType==='b'" 
:data:tableList1>
//pageType=b时渲染为列2.1
	<el-table-column
	lable="列2.1"
	prop="column1">
	</el-table-column>
//pageType=b时渲染为列1.2	
	<el-table-column
	lable="列2.2"
	prop="column1">
	</el-table-column>
//pageType=b时渲染为列1.3	
	<el-table-column
	lable="列2.3"
	prop="column1">
	</el-table-column>
</el-table>

解决办法

首先尝试了将表2的数据绑定也改为<template>但是bug还在。
换了一种方法，猜测可能是<template>在表格中绑定数据的机制导致的渲染切换并不能动态更新，所以给<template>元素同样加一个自己的渲染判断，当pageType=b时不渲染：

//表格1当pageType=a时渲染
<el-table
v-if="pageType==='a'" 
:data:tableList1>
	<el-table-column
	lable="列1.1"
	prop="column1">
	</el-table-column>
//加入渲染判断
	<el-table-column
	lable="列1.2">
	<template solt-scope="scope" v-if="pageType==='a'">
		<el-button type="text" @click="del(scope.row)">删除</el-button>
	</template>
	</el-table-column>
//加入渲染判断
	<el-table-column
	lable="列1.3">
	<template solt-scope="scope" v-if="pageType==='a'">
		{{scope.row.status==='0'?'开启':'关闭'}}
	</template>
	</el-table-column>
</el-table>

//表格2当pageType=b时渲染
<el-table
v-if="pageType==='b'" 
:data:tableList1>
	<el-table-column
	lable="列2.1"
	prop="column1">
	</el-table-column>
	<el-table-column
	lable="列2.2"
	prop="column1">
	</el-table-column>
	<el-table-column
	lable="列2.3"
	prop="column1">
	</el-table-column>
</el-table>

问题解决

希望对你的问题能有帮助，也可以留言和我讨论，指出我的错误共同学习。