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