Cascader 级联选择器可以选择任意一级

文章描述了一个需求,需要修改Element组件的级联选择器样式,去除默认的圆圈效果,同时提供了一份在App.vue中调整样式以适应需求的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近有一个需求,产品要求级联选择器可以选择任意一级,对于Element组件的级联只能通过props属性可以解决,但样式太丑了,如图:

需要点击左边的圆圈看起来很丑,需要去掉圆圈后点击跟平常一样

上代码,在你的页面加入这些代码

<template>
  <div>
    <el-cascader
      ref="myCascadeRef"
      popper-class="myCascade"
      :props="props"
      style="width: 100%"
      v-model="value"
      :options="options"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>
<script>
export default {
  data() {
    return {
      props: {
        checkStrictly: true, //是否可以选择树干节点作为选项
        expandTrigger: 'hover',
      },
      value: [],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致',
                },
                {
                  value: 'fankui',
                  label: '反馈',
                },
              ],
            },
          ],
        },
      ],
    };
  },
  watch: {
    value() {
      if (this.$refs.myCascadeRef) {
        this.$refs.myCascadeRef.dropDownVisible = false; //监听值发生变化就关闭它
      }
    },
  },
  methods: {
    handleChange(e) {
      console.log('打开');
    },
  },
};
</script>

此时还需要改下样式,需要在App.vue写样式,记得style不能加scoped

<style>
.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>

效果图:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值