elementui級聯下拉框怎么設置可選擇任意一級選項以及設置后前面會出現1個單選按鈕去掉單選按鈕的方法和選好后下拉面板不自動收起的問題


一、elementui的級聯下拉列表默認只能選擇最末端的那個,如果需要點擊哪個就可以選擇哪個,需要做如下設置:
 
解決方法:在props屬性增加{checkStrictly: true
 
<el-cascader :props="{ checkStrictly: true, }" ></el-cascader>
 
二、這樣設置后又會出來1個問題級聯下拉框設置可選擇任意一級選項時前面會出現1個小圓圈以及選好后下拉面板不自動收起。
 
去掉單選框解決方法:在全局css文件中添加如下代碼:
 
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 10px;
}

.el-cascader-node__label {
  width: 157px;
}

.el-cascader-panel .el-radio__input {
  visibility: hidden;
}

.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
 
修改前:
 

 

修改后:
 
 
選好后下拉自動收到解決方法:
 
1,先給el-cascader  一個change事件
 <el-cascader @change="cascaderSelectChange" ref="cascaderRef" ></el-cascader>
 
2,change事件函數:
 
   cascaderSelectChange() {
     // 自動收到下拉框
      this.$refs.cascaderRef.dropDownVisible = false
    },
 
最坑的是官網文檔根本沒提到dropDownVisible 這個屬性,網上找資料找半天,心累。。。。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM