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(); },
