vxe-table column width error,宽度问题,列宽错误,在 Tab 页切换显示隐藏中导致样式错乱的解决方法
问题原因:
由于在隐藏的 div 中去初始化表格无法计算宽度的,所以会导致表格切换后样式错乱 ,dom 渲染中只有可视元素才存在宽度,如果元素处于隐藏状态是无法计算的;所以应该确保表格渲染时父元素处于可视状态
<div>
<ul>
<li @click="showTab = 1">切换1</li>
<li @click="showTab = 2">切换2</li>
<li @click="showTab = 3">切换3</li>
</ul>
<div v-show="showTab === 1">
<vxe-table
border
:data="tableData">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="date" title="Date"></vxe-column>
</vxe-table>