若依 ruoyi-vue element-ui el-cascader 级联选择器选择任意一级选项，去掉单选按钮，选中点击后隐藏

Xiaoweidumpb

已于 2024-06-06 11:41:38 修改

阅读量571

点赞数 2

分类专栏： # 若依框架文章标签： vue.js javascript ecmascript

于 2024-06-04 20:56:18 首次发布

本文链接：https://blog.csdn.net/qq_43751489/article/details/139453706

版权

若依框架专栏收录该内容

32 篇文章 11 订阅

订阅专栏

Cascader 级联选择器选择任意一级选项，去掉单选按钮。
这兄弟文章写的可以，查了一堆文章，基本搞完才发现。

官方的例子不支持选中后自动关闭，要点击旁边空白，并且单选框太小了。
在这里插入图片描述

              <el-form-item label="所属地域" prop="areaCode">
                <el-cascader
                    style="width: 100%"
                    ref="cascader"
                    v-model="form.areaCode"
                    :options="tzSysTreeDictOptions"
                    @change="handleCascaderChange"
                    :props="{ expandTrigger: 'hover', label: 'name' ,emitPath: false,checkStrictly: true }"
                    placeholder="选择所属地域"
                />
              </el-form-item>

    handleCascaderChange(){
      this.$refs.cascader.dropDownVisible = false;
    },

全局样式，他们文章样式有问题，会导致el-radio-group 组件的单选框也消失

//el-cascader 单选框不显示，点击即选中
.el-cascader-node .el-radio__inner {
  border-radius: 0;
  border: 0;
  width: 170px;
  height: 34px;
  background-color: transparent;
  cursor: pointer;
  box-sizing: border-box;
  position: absolute;
  top: -18px;
  left: -19px;
}

.el-cascader-node .el-radio__input.is-checked .el-radio__inner {
  background: transparent;
}