浏览器窗口变小(或者在小屏幕上), 表格横向显示缺失

[redwolf1996]

当浏览器窗口变小(或者在小屏幕上), 表格横向显示缺失, 竖向是有滚动条的, 横向能否也显示滚动条?

[Azir-11]

这个组件库并不是为移动端设计的，所以组件在移动端的显示难免会出现一些问题，可以尝试在移动端使用更适合的组件库

关于横向滚动条的问题，naive的设计是当鼠标聚焦到表格上时才会出现横向滚动条，在移动端则是需要先点击表格的某一行，所以这个其实并不是显示有缺失，是设计如此

[s414june]

@redwolf1996 你可以如下撰寫：

import { onMounted, ref } from 'vue';
//省略...
const scrollX = ref(0);

onMounted(() => {
  scrollX.value = document.querySelector('#userTable .n-data-table-table')?.clientWidth || 640;
});
//省略...

框架部分

<NDataTable
        id="userTable"
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="scrollX"
        :loading="loading"
        :pagination="pagination"
        :row-key="item => item.id"
        class="sm:h-full"
      />

必要時使用resize來讓scrollX值變化。

[honghuangdc]

自行找表格最小宽度