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

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

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2024-06-10 11:24:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-10 11:24:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-10 11:24:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-10 11:24:03       18 阅读

热门阅读

  1. Git常用命令

    2024-06-10 11:24:03       9 阅读
  2. python-win10跑通chattts笔记(亲测可跑)0.8.010

    2024-06-10 11:24:03       9 阅读
  3. 列举常见的SQL语句

    2024-06-10 11:24:03       10 阅读
  4. 谈谈 Tomcat 连接器

    2024-06-10 11:24:03       7 阅读
  5. 2024年城市客运安全员考试题库及答案

    2024-06-10 11:24:03       9 阅读