elementPlus el-table-column使用了v-if来控制隐藏和显示出现的样式和滚动条问题

1,502 阅读1分钟

问题原由:

本地启动服务使用v-if来隐藏表格某一列是正常的。但是放到服务器上面测试电脑会出现滚动条,而且还滚动不了。本身所有的列都没有超出表格的宽度。
//这里面使用的v-if
<el-table-column v-if="param.showCell" prop="status":label="showFieldNameObj.tableAdditionalStatus" width="130">
  <template #default="scope">
    {{ scope.row.additionalStatus ? '已完成' : '未完成' }}
   </template>
</el-table-column>
//这里面使用的v-if
<el-table-column v-if="param.signatureApplication" :label="showFieldNameObj.tableSignatureApplication" align="center" width="150">
	<template #default="scope">
		<div v-if="scope.row.uuid" class="varground">
			<span class="pointer red" @click="downfile(scope.row.uuid, '', scope.row.filename)">预览</span>
			<span class="pointer red" @click="downfile(scope.row.uuid, 'down', scope.row.filename)">下载</span>
		</div>
	</template>
</el-table-column>
看到网上给el-table-collumn添加固定key没有用。

解决办法就是在请求数据之后拿到判断条件字段之后调用table里面的doLayout方法

image.png

nextTick(()=>{
    //这边使用这个是为了 el-table-column中使用了v-if来判断和显示 
    //如果不调用此方法的话,会出现样式错乱和滚动条无缘无故的出现等问题 
    layoutTable.value.doLayout();
})