🌐Vue 表格篩選視窗被遮住怎麼辦?一次看懂表格空白列高度、下拉篩選框顯示問題與修正方式
Vue 表格篩選視窗被遮住怎麼辦?新手也能看懂的完整教學 在做後台系統、報表頁面或資料查詢頁時,最常見的一種畫面就是「大表格」。 像是生產資料、訂單資料、客戶資料、排程結果,通常都會做成可以搜尋、可以篩選、可以匯出的表格。 但很多人在實作這種功能時,常常會遇到兩個很煩的問題: 點開欄位篩選時,下拉視窗被切掉,看不到完整內容 當篩選後沒有資料時,提示訊息那一列太矮,看起來很空、很怪 這篇文章會用 完全新手也能理解 的方式,帶你一步一步看懂: 為什麼表格篩選框會被遮住 為什麼「查無資料」那一列看起來很醜 怎麼用 Vue + CSS 修正 怎麼讓畫面更像正式商業系統 一、什麼是「表格篩選框被遮住」? 想像你在 Excel 裡面按欄位篩選,會跳出一個可以勾選資料的清單。 在網頁中,我們也常常會做類似的功能,例如: 點「客戶」欄位的小按鈕 跳出所有客戶名稱 勾選你想保留的資料 表格只顯示符合條件的列 問題是,很多人把這個篩選框放在表格容器裡後,因為外層區塊設定了 overflow ,所以超出邊界的部分就直接被裁掉了。 你看到的現象通常會像這樣: 篩選框明明有打開 但只露出一小部分 想看完整內容還要拖旁邊的捲軸 使用者會以為功能壞掉 這其實不是 Vue 壞掉,也不是資料沒出來,通常只是 CSS 顯示層級與容器裁切設定 的問題。 二、另一個常見問題:篩選後沒資料,提示列太矮 很多頁面在篩選之後,如果沒有符合條件的資料,會顯示一行字,例如: 符合篩選的資料為空 但是如果這一列只是普通 <td> ,就會變成: 高度很小 只有一條細細的訊息 下方大片空白 看起來不像完整介面 對使用者來說,這種畫面很容易造成誤解,會以為: 是資料沒載入完成 是頁面壞掉 是自己操作錯誤 所以實務上,我們通常會把這一列做成 比較高的提示區塊 ,讓使用者一眼就知道: 「不是壞掉,是目前篩選條件下沒有資料。」 三、先用白話文理解問題本質 這類問題,核心其實只有兩件事。 ...