elementUI cascader 級聯選擇器單選任一項修改

需求:刪除單選框,點擊文字選擇並關閉下拉框

首先爲不污染其他級聯選擇器,需要自定義類名

<el-cascader popper-class="myCascader" ></el-cascader>

然後在樣式表裏修改樣式

.myCascader {
  .el-radio__inner {
    top: -18px;
    left: -19px;
    border-radius: 0;
    border: 0;
    width: 170px;
    height: 34px;
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
    position: absolute;
  }
  .el-radio__input.is-checked .el-radio__inner {
      background: transparent;
  }
}

在methods裏關閉下拉框

    cascaderChange (val) {
      console.log(val)
      if (this.$refs.myCascader) {
        // this.$refs.myCascader.closeVisible = false
        this.$refs.myCascader.dropDownVisible  = false
      }
    },

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章