antd级联选择器a-cascader多选情况下去掉checkbox以及一些配置问题

(1)需求:最近写项目时遇到一个需求,使用级联选择框进行多选操作,且只要求能勾选二级选项。但是我用的antd v3.20版本,a-cascader组件里设置为多选的时候会默认带上选项前的勾选框框,如图:

勾选框倒不要紧张,但是一级选项的勾选框如果不小心选了,那会默认整个对应的二级选项都勾选,需求要求只能选中二级选项,那就改吧,思路就是把这个勾选的框框去掉。

 

(2)解决:在全局css文件里加上

.ant-cascader-checkbox .ant-cascader-checkbox-inner {
	display: none;
}

(3)效果:

(4)附上组件代码

<a-cascader
		multiple   // 多选设置
		labelInValue
		class="props-multiple-select"
		placeholder="选择参数"
		v-model:value="searchFormState.propsArrayValue"
		:max-tag-count="1"      //最大选中能见的数量,选中选项多余1个时,其余选项会变成省略号
		:max-tag-text-length="4" // 单选能见选项的文本长度
		:show-all-levels="false"   //是否展示所有层级
		:options="transformedData"
		:showSearch="true"    // 选项搜索
		expandTrigger="hover"   //打开二级选项的方式,可选的有点击和鼠标聚焦
		@change="propsSelect"
		>
</a-cascader>

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值