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 這個屬性,網上找資料找半天,心累。。。。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章