【Vue】el-cascader级联选择,点击文本选中,并且关闭下拉框
el-cascader级联选择默认选择radio时才可以选中,选择文本是选择不中的,将radio的宽高填满,这样点击文字也就能点到radio了,然后将.el-radio__input样式设置为不可见:<el-cascader :options="deptOptions" :props="{ label: 'deptName', value: 'deptId',emitPath: false,
·
el-cascader级联选择默认选择radio时才可以选中,选择文本是选择不中的,将radio的宽高填满,这样点击文字也就能点到radio了,然后将.el-radio__input样式设置为不可见:
<el-cascader :options="deptOptions" :props="{ label: 'deptName', value: 'deptId',emitPath: false, checkStrictly: true }"
v-model="selectDeptId"
class="ml15"
clearable
ref='selectDeptRef'
@change="onSearchClick">
<template slot-scope="{ node, data }">
<span>{{ data.deptName }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
设置样式:
div /deep/ .el-radio {
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
right: 0;
}
div /deep/ .is-disabled { // 不允许选中样式
cursor: not-allowed;
}
div /deep/ .el-radio__input {
visibility: hidden;
}
当下拉框值改变时关闭下拉框
onSearchClick () {
this.$refs.selectDeptRef.dropDownVisible = false
},
更多推荐
已为社区贡献6条内容
所有评论(0)