【总】设置el-cascader级联结构为2级时，只有第2级可勾选且点击label就可选中，且绑定值直接为第2级id数据。(popper-class属性可用来区分多个级联)

el-cascader组件通用属性配置（主要通过popper-class属性设置和区分多个级联组件）：

props属性的常用取值：

1. expandTrigger: 'hover', //  鼠标悬浮展开子级框
2. emitPath: false // v-model的绑定值，直接是最后一级的value值，不包含父级。
3. children: 'stock_data', // 设置子级的数组名为stock_data字段（默认组件读children字段），注意：如果children为空数组，组件也会渲染（点击展开为空白框），因此若children为空数组，需让后台直接不要返回该属性字段或返回值改为undefind！
4. checkStrictly: false // 该属性默认为true, 即多级数据，用户只能勾选最后一级，设置为false,  用户可以选择任意一级。

点击label就可以选中原理：设置el-radio（单选）或el-checkbox（多选）的宽度width为100%，然后设置对应label文本的宽度为 - 90%即可。

<!--template中的级联组件-->
<el-cascader
    v-model="listQuery.store_id"
    :options="warehouseList"
    ref="cascaderStore"
    popper-class="custom_cascader"
    :props="{ 
        label: 'storeroom_name', 
        value: 'storeroom_id', 
        children: 'store_list', 
        checkStrictly: true, 
        expandTrigger: 'hover', 
        emitPath: false
      }"
    filterable
    clearable
    placeholder="请选择仓库库房"
>
</el-cascader>

无论几级，点击label就可以选中：

// 点击label就可以选中，其中：custom_cascader为自定义级联组件类名。

// 单选
.custom_cascader .el-cascader-panel .el-cascader-menu .el-radio {
  width: 100% !important;
}

// 多选
.custom_cascader .el-cascader-panel .el-cascader-menu .el-checkbox {
  width: 100% !important;
}

// 设置单/多选的label宽度
.custom_cascader .el-cascader-panel .el-cascader-menu .el-cascader-node__label{
  margin-left: -90% !important;
}

case1：共2级，只能选择第2级数据，且点击label就可以选中。 （注意：限制只能选择第2级， 也可以直接设置checkStrictly属性为true即可（默认不写，该属性就是为true））

/* 设置下拉框中，隐藏第1级的勾选，设置第2级点击label就可以选中 */
/* 注：当一个页面有多个级联组件，为了区分，可设置 popper-class="custom_cascader" 属性来区分！
   下面设置的css前再加上自定义类名即可。nth-of-type(2)为第2级下拉菜单父容器
*/
.el-cascader__dropdown .el-cascader-menu:nth-of-type(1) .el-cascader-node label {
   display: none;
}
.el-cascader-panel .el-cascader-menu:nth-of-type(2) .el-checkbox{
    width: 100%;
}
.el-cascader-panel .el-cascader-menu:nth-of-type(2) .el-cascader-node__label{
    margin-left: -90%;
}

case 2：共3级，限制第一级不可选， 其他级都可选。

注：该css设置，在某个.vue组件scoped中设置可能不生效，需到全局的css文件设置（如index.css）

// 商品分类3级，需限制第1级不可选（goods-category-cascader-stocking-page为popper-class类名）
.goods-category-cascader-stocking-page .el-cascader-menu:nth-of-type(1) .el-radio__input {
  display: none !important;
}

其他扩展技巧：

1. 如何过滤children为空数组的数据？（即当children为空数组，页面不要渲染空白展开框）

// 格式化数据，递归将空的children置为undefined
formatCascaderData(data) {
  for (var i = 0; i < data.length; i++) {
    if (data[i].children.length < 1) {
       // children若为空数组，则将children设为undefined
       data[i].children = undefined;
    } else {
       // children若不为空数组，则继续 递归调用 本方法
       this.formatCascaderData(data[i].children)
    }
  }
 return data
}