el‐cascader‐menu‐item - daniel-qa/Vue GitHub Wiki

什麼是 < el-cascader-menu-item>？

功能： 它代表 的單個選單項目。 角色： 用於渲染選擇器中的每一個條目，處理點擊事件、層級顯示、是否可選等行為。 使用場景： 當你需要自定義顯示樣式或行為時，可能需要直0接操作這個組件。

  • 調整尺寸大小

Flex 布局默认行为：

设置 display: flex 后，子元素默认水平排列。

若要实现垂直排列，需要设置 flex-direction: column。

<el-cascader-menu-item style="width: 800px; height: 500px; display: flex>

</el-cascader-menu-item>
  • 調整層級 (z-index) 和定位 (position)

使用 position: relative 或 absolute 與 z-index 設置，使內容位於正確的層級上，避免被遮蔽。

... position: relative; z-index: 10; overflow: auto;">

<el-cascader-menu-item 
  style="width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; z-index: 10; overflow: auto;">

  <div>
    只有一個學校項目1只有一個學校項目2只有一個學校項目3只有一個學校項目4只有一個學校項目5   
  </div>
</el-cascader-menu-item>
  • position: relative; 的作用：

相對定位：相對於元素原本的位置進行偏移，但它仍占據原本的位置空間，不會影響兄弟元素的佈局。

在不偏移的情況下，啟用 z-index 屬性：若沒有設置 position 或設置為 static，z-index 不會生效。

z-index: 10; 的作用：

堆疊順序控制：指定元素在 z 軸上的堆疊層級，數值越大，越在上層顯示。

生效條件：z-index 只有在 position 設置為非 static 時有效（如 relative、absolute 或 fixed）。

  • 子元件最上面超框

因為父容器內部的布局未考慮到內容的實際高度：

尤其是 justify-content: center; 和 align-items: center;，這種設置會讓所有內容居中，如果內容高度超過可見範圍，部分內容會被裁剪。

修改建議 1：調整對齊方式

讓內容從上到下正常排列：

<el-cascader-menu-item style="
    width: 500px;
    height: 500px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
    overflow: auto;">
    
    <div style="padding: 10px;">
        1234567890abcdefghijk1234567890
    </div>
    <div style="padding: 10px;">
        1234567890abcdefghijk1234567890
    </div>
   
</el-cascader-menu-item>
  • 使用 margin 偏移, 修正被父組件遮避的問題

因參考父組件的位置居中，才導致的遮蔽 (justify-content: center 是基於父容器的寬度來計算的)

 ... margin-left: 100px; /* 向右偏移 100px */">

<el-cascader-menu-item style="
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: auto;
    margin-left: 100px; /* 向右偏移 100px */">

    <div style="padding: 10px; text-align: center;">
        只有一個學校項目1只有一個學校項目2只有一個學校項目3
    </div>
</el-cascader-menu-item>
  • 建議的改進方式

如果你擔心直接使用內部組件的風險，可以改用官方支持的插槽 (scoped slot)：

<el-cascader
  v-model="selectedValue"
  :options="areaOptions"
  placeholder="請選擇學區和學校">
  <template #default="{ node, data }">
    <div v-if="node.level === 2" style="padding: 10px;">
      <!-- 自定義內容 -->
      <el-input v-model="wordFilter" placeholder="請填入簡碼或學校名稱" style="width: 150px;" clearable />
      <el-table :data="filteredTableData" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </div>
  </template>
</el-cascader>

這樣能保證未來框架升級時代碼的兼容性，並避免直接操作內部組件。

  • 滾動條或分段顯示

如果內容過多，超出父容器範圍，可以使用 overflow: auto 為其添加滾動條，確保可視性。

⚠️ **GitHub.com Fallback** ⚠️