Element Cascader 級聯選擇器 選擇第一級 label標題選擇 內容過多

1.以Element 2.14.1 版本為例子（舊版指的是2.14.1之前的版本）

2.change-on-select (是否選擇任意一級的選項) 舊版 此屬性已取消

3.新版本屬性為 checkStrictly 默認為false 是否嚴格的遵守父子節點不互相關聯

 :props="{ expandTrigger: 'hover' , checkStrictly: true}"

4.這時候會出現倆個問題 （1.點擊一級分類前面小圓點，彈框並不會立即關閉，2.label標題點擊不可選擇）

5.解決4.1選擇一級標題不關閉彈窗問題

　　　el-cascader 有@change數據改變事件 

        <el-cascader ref="refHandle" @change="parentCateChanged" >
        </el-cascader>

　　方法中dropDownVisible 改為 false 即可

    parentCateChanged () {
      this.$refs.refHandle.dropDownVisible = false
    }

　　

6.解決4.2 label標題也可選擇問題

　　辦法1：定時器 不推薦 消耗性能

  mounted () {
    // 點擊文字的時候也自動選擇radio標簽 不推薦此用法
    setInterval(function () {
      document.querySelectorAll('.el-cascader-node__label').forEach(el => {
        el.onclick = function () {
          if (this.previousElementSibling) this.previousElementSibling.click()
        }
      })
    }, 1000)
  }

　　辦法2：css將小圓圈透明，之后定位在文字之上 （相對推薦，但少了小圓點）

.el-cascader-panel .el-radio{
 position:absolute;
 z-index:10;
 padding:0 10px;
 width:132px;
 height:34px;
 line-height:34px;
}
.el-cascader-panel .el-radio__input{
 visibility:hidden;
}
.el-cascader-panel .el-input-node__postfix{
 top:10px;

　　目前的解決辦法，都不太理想，如果各位大神有更好的解決辦法，歡迎評論留言

 

7. 如果數據項過多，就會出現如下情況

解決辦法：規定框的高度即可

.el-cascader-panel{height: 200px;}