vxe-table中切换页签,某些列的展示与隐藏

总结:vxe-table中切换页签,某些列的展示与隐藏,可使用:visible +  refreshColumn() 解决

问题:vxe-table中切换页签,某些列需要展示与隐藏,如果在vxe-column 上使用v-if则可能导致列的顺序发生变化,应该使用:visible
然后再切换页签的@tab-click="handleClick"发放中使用exceptionhandlerTable.value.refreshColumn()刷新列。exceptionhandlerTable.value是表格的ref

注意表格获取是否正确

<vxe-column
  :visible="['0', '1', '2'].includes(activeKey)"
  title="库存"
  width="100"
 >
   <template #default="{ row }">
    <div>shein库存:{{ row.day }}||666666</div>
    <div>在仓:666666</div>
    <div>在途:666666</div>
   </template>
</vxe-column>

const changeTab = (tab) => {
    activeKey.value = Number(tab.props.name);
    tabIndex.value = Number(tab.index);
    handleTabsCount();
    onSubmit();
    nextTick(() => {
  <!-- exceptionhandlerTable.value是表格的ref -->
      exceptionhandlerTable.value.refreshColumn();
    });
  };

 



posted @ 2025-04-24 11:07  芬-mi  阅读(154)  评论(0)    收藏  举报