Element UI 中使用el-cascader组件,可以选择任意一级的内容并取消单选框

这篇具有很好参考价值的文章主要介绍了Element UI 中使用el-cascader组件,可以选择任意一级的内容并取消单选框。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在Element UI中使用级联选择器,并且设置可以选择任意一级的内容

 <el-cascader 
v-model="selectedKeys" 
<!-- options 指定数据源 -->
:options="options" 

<!-- 悬浮级类上自动展开 -->
:expand-trigger="'hover'" 
style="width:100%"

<!-- 父级分类选择项发生后触发函数 -->
@change="change" 

<!-- 是否支持清空选项 -->
clearable 

<!-- checkStrictly可以选择任意一级的内容 -->
:props="{ checkStrictly: true }">
</el-cascader>

解决方案:

当加入checkStrictly后就会出现单选框的问题,修改样式即可;这里使用的less语法,需要有less依赖,加入样式后如果没有生效,可以放在App.vue中的样式下文章来源地址https://www.toymoban.com/news/detail-767335.html

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

到了这里,关于Element UI 中使用el-cascader组件,可以选择任意一级的内容并取消单选框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包