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
    },

Logo

前往低代码交流专区

更多推荐