el-cascader 是 Element UI 中的级联选择器组件，它可以用于选择多级联动的数据

下面介绍 el-cascader 常用的属性及使用方法，并提及一些注意事项。

常用属性：

1. options：数据源，用于指定级联选择器的选项数据。它是一个数组，每个元素代表一个选项，包含 value，label，children 等属性。可以是静态的数组，也可以是动态的、通过接口获取的数据。
2. value：组件的绑定值，可以使用 v-model 进行双向绑定。它是一个数组，表示当前选择的所有选项的值。
3. props：配置选项对象的属性。其中 props.value 表示选项值的键名，props.label 表示选项标签的键名，props.children 表示子级选项的键名。
4. placeholder：占位符文本，在没有选中任何选项时显示。
5. filterable：是否可搜索选项，默认为 false。设置为 true 后，可以在输入框中搜索选项。
6. clearable：是否可清空选项，默认为 false。设置为 true 后，右侧会显示一个清空按钮，点击后可以清空已选的选项。
7. disabled：是否禁用组件，默认为 false。设置为 true 后，组件将无法进行交互。
8. expand-trigger：展开子选项的触发方式，可选值为 'click' 和 'hover'。默认为 'click'，表示点击展开子选项，设置为 'hover' 则表示鼠标悬停在选项上时展开子选项。

注意事项：

1. el-cascader 组件的数据源说明需要符合特定的数据格式，即每个选项对象应该包含 value、label、children 等属性。
2. 通过 props 属性可以自定义选项对象的键名，如果数据源的键名不同，需要进行映射。

3. :props="{ 
    label: 'label', 
           value: 'value', 
           children: 'children', 
           lazy: true,
           // checkStrictly: true, 
           // expandTrigger: 'hover', 
           // emitPath: false   
         }"

4. 如果数据嵌套层级很深，需要注意组件默认的展示宽度可能不够，可以使用 CSS 自定义组件的宽度。

多个接口调用：

需求：输入框拿到最后一级的选中的值，一级通过调用接口1获取，2级通过拿到接口1的id，再调用接口2获取数据，没有数据展示为暂无数据。

开始思路：

不用组件的lazy，自己尝试拿到数据后通过循环或者map进行操作的转为树状，二级列表的展示会有问题，数据更新但是视图并不会，一级能够正常显示，二级为点击获取的会有问题。

动态懒加载获取数据：

要调用两次接口，并不是拿到树状的结构，需要将两次的数据合在一起使用（也是父子关系），点击一级获取2级数据，为动态的。（效果如下图：）

  //显示
<el-cascader  style="width: 270px"
 :options="options" 
:props="props" 
:show-all-levels="false"   
clearable 
filterable v-model="consumerNolist" 
@change="handleChange"
></el-cascader>

属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级

data里面的代码：

（望自行优化，我就不优化了）

options: [],
      props: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          console.log(node,'node');
          const { level } = node;
          const nodes = [];
          // level: 层级
          // node 节点数据
          // 一级菜单数据
          // 为1代表第一次请求
          if(level==0){
            getAllShpper()
            .then((res) => {
              // 节点数组
              res.data.items.map((item) => {
                  let obj = {
                    value: item.shipperNo,
                   label: item.shipperName,
                  leaf: node.level >=2, 
                };
                nodes.push(obj)
            
              });
              resolve(nodes);
            })
            .catch((error) => {
              console.log(error);
            });
          }
          if(level==1){
            getConsumer({'shipperNo':node.value})
            .then((res) => {
              // 节点数组
              res.data.items.map((item) => {
                  let obj = {
                    value: item.consumerNo,
                   label: item.consumerName,
                  leaf: node.level >=1, 
                };
                nodes.push(obj)
            
              });
              // resolve 节点返回
              resolve(nodes);
            })
            .catch((error) => {
              console.log(error);
            });
          }

        },
},

高度样式问题：

同时需要注意的是默认的高度为内容高度，在当前页面设置无效果，深度也一样，

当前页面：
.el-cascader-panel{
   height: 300px ;
   overflow: hidden;
 }  局部无效


 ::v-deep .el-cascader-panel{
   height: 300px ;
   overflow: hidden;
 }  局部深度无效

搞个全局（在src\assets\styles里面）就行。

src\assets\styles

.el-cascader-panel{
   height: 300px ;
   overflow: hidden;
 }  全局有效

结语：

你所做的事情，也许暂时看不到成果，但不要灰心或焦虑，你不是没有成长，而是在扎根。