el-cascaderPanel 取消滚动条

要取消 el-cascader 组件的滚动条，可以通过以下步骤进行操作：

1. 首先，在 el-cascader 的外部容器上添加一个 CSS 类名，例如 "no-scrollbar"。

<template>
  <div class="no-scrollbar">
    <el-cascader ...></el-cascader>
  </div>
</template>

<style>
.no-scrollbar {
  overflow: hidden;
}
</style>

2. 接下来，给 el-cascader 的菜单列表添加一个 CSS 类名，例如 "no-scrollbar-menu"。

<template>
  <div class="no-scrollbar">
    <el-cascader @visible-change="handleVisibleChange">
      <template slot="dropdown-menu" slot-scope="{ node }">
        <div class="no-scrollbar-menu">
          {{ node.label }}
        </div>
      </template>
    </el-cascader>
  </div>
</template>

<style>
.no-scrollbar {
  overflow: hidden;
}

.no-scrollbar-menu {
  max-height: none !important;
  overflow: visible !important;
}
</style>

3. 最后，通过在组件的 `visible-change` 事件中动态计算菜单列表的高度，以确保菜单内容不会溢出。

<template>
  <div class="no-scrollbar">
    <el-cascader @visible-change="handleVisibleChange">
      <template slot="dropdown-menu" slot-scope="{ node }">
        <div class="no-scrollbar-menu" :style="{ maxHeight: menuMaxHeight }">
          {{ node.label }}
        </div>
      </template>
    </el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuMaxHeight: ''
    };
  },
  methods: {
    handleVisibleChange(visible) {
      if (visible) {
        const cascaderEl = this.$refs.cascader.$el; // 获取 el-cascader 组件的 DOM 元素
        const cascaderMenuEl = cascaderEl.querySelector('.el-cascader__dropdown'); // 获取 el-cascader 菜单列表的 DOM 元素
        const cascaderMenuTop = cascaderMenuEl.getBoundingClientRect().top; // 获取菜单列表相对于视口顶部的距离
        const windowHeight = window.innerHeight; // 获取视口高度
        
        // 计算菜单列表的最大高度
        this.menuMaxHeight = `${windowHeight - cascaderMenuTop}px`;
      }
    }
  }
};
</script>

<style>
.no-scrollbar {
  overflow: hidden;
}

.no-scrollbar-menu {
  max-height: none !important;
  overflow: visible !important;
}
</style>

通过以上步骤，你可以取消 el-cascader 组件的滚动条。这样，当菜单列表的内容超过容器的高度时，菜单会自动根据视口高度调整高度，并且不会出现滚动条。