vue的聯級選擇器(單選)點擊單選框選中改點擊整行選中


1,模板方面使用elementui的聯級選擇器

              <el-cascader
                ref="refHandle"
                v-model="cashTypeValue"
                :options="cashTypeData"
                :props="{ checkStrictly: true,expandTrigger: 'hover',emitPath: false }"
                :show-all-levels="false"
                placeholder="流水類型"
                clearable
                @change="handleChange"></el-cascader>

2,通過css修改選中的區域有單選框改為整行,注意需要在全局樣式中修改

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

3,change事件點擊后關閉彈框

    handleChange(cashTypeValue) {//監聽值發生變化就關閉部門聯級帥選器
      if (this.$refs.refHandle) {
        this.$refs.refHandle.dropDownVisible = false;
      }
      this.rechargeLog.params.type = !!cashTypeValue?cashTypeValue:'';
      this.search();
    },

 


免責聲明!

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



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