vue+element+Cascader 级联选择器任意一级选项,去掉单选框radio

 

 

 

 

 

复制代码
<template>
  <div class="block">
    <h1 class="demonstration">选中的值:{{ value }}</h1>
    <el-cascader
      :options="options"
      v-model="value"
      popper-class="cascaderBox"
      :props="defaultProps"
      clearable
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "10",
      defaultProps: {
        emitPath: false,
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children",
      },
      options: [
        {
          id: "1",
          name: "分类1",
          children: [
            {
              id: "10",
              name: "列表1",
            },
            {
              id: "11",
              name: "列表2",
            },
          ],
        },
        {
          id: "20",
          name: "分类2",
          children: [
            {
              id: "21",
              name: "列表1",
            },
            {
              id: "22",
              name: "列表2",
            },
          ],
        },
      ],
    };
  },
  methods: {
    visibleChange() {
      if (this.$refs["cascader"]) {
        this.$refs["cascader"].closeVisible = false;
      }
    },
  },
};
</script>
<style lang="less">
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>
复制代码

 

posted @   此夏_唯美  阅读(104)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示