el‐cascader - daniel-qa/Vue GitHub Wiki

el-cascader

跨层自定义样式：

不同层级的菜单宽度可以通过 node.level 条件单独设置样式。

通过 popper-class 自定义样式，避免重复编写逻辑。

<el-cascader
  v-model="selected"
  :options="options"
  :props="props"
  popper-class="custom-cascader-menu"
  filterable
>
  <template #default="{ node, data }">
    <div>
      {{ data.label }}
    </div>
  </template>
</el-cascader>

<style>
/* 全局设置第二层菜单高度 */
.custom-cascader-menu .el-cascader-menu:nth-of-type(2) {
  min-width: 300px;
  max-width: 500px;
  min-height: 150px; /* 设置最小高度 */
  max-height: 300px; /* 设置最大高度 */
  overflow: auto;    /* 内容超出时滚动 */
}
</style>

通过层级判断（推荐）：

node.level 可以用来判断菜单的层级，并动态绑定样式：

<!-- 自定义选项内容 -->
<template #default="{ node, data }">

       <!-- 第一層選單，显示选项的文字 -->
       <template v-if="node.level === 1">
           11111           
       </template>

       <!-- 第二層選單，显示选项的文字 -->
       <template v-if="node.level === 2">
             <div
				:style="{
				  minWidth: '300px',
				  maxWidth: '500px',
				  minHeight: '150px',
				  maxHeight: '300px',
				  overflow: 'auto'
				}"
			  >
				<div style="display: flex; flex-direction: column; gap: 10px;">
					{{ data.label }}
				</div>		
			</div>
		</template>
		
</template>

Cascader 的插槽功能

用來對 Menu-Item 進行客製，比如增加 Button

<template>

  <el-cascader
    :options="options"
    v-model="selectedValue"
    expand-trigger="hover"
  >
    <!-- 自定義插槽 -->
    <template #default="{ node, data }">
      <div class="custom-menu-item">
        <span>{{ data.label }}</span>
        <el-button
          type="text"
          size="mini"
          @click.stop="onButtonClick(data)"
        >
          按鈕
        </el-button>
      </div>
    </template>

  </el-cascader>

</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const options = ref([
      {
        value: "option1",
        label: "選項 1",
        children: [
          {
            value: "option1-1",
            label: "選項 1-1",
          },
        ],
      },
      {
        value: "option2",
        label: "選項 2",
      },
    ]);

    const selectedValue = ref([]);

    const onButtonClick = (data) => {
      alert(`你點擊了按鈕: ${data.label}`);
    };

    return {
      options,
      selectedValue,
      onButtonClick,
    };
  },
});
</script>

<style>
.custom-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
⚠️ **GitHub.com Fallback** ⚠️