首先放出官网效果:

2023-06-06-11-51-33.gif

项目需求:

将示例的点击radio和点击文字功能结合在一起。可以选择任意一级的内容,直接点击文字即可选中,同时如果有下一级就展示,去掉radio标签。

实现思路:

通过css将radio标签做成文字框一样大小并且透明覆盖在整个文字上方,点击文字的时候其实是在点击radio标签

css代码:

.el-cascader-panel {
	.el-radio {
		width: 100%;
		height: 100%;
		z-index: 10;
		position: absolute;
		top: 10px;
		right: 10px;
    }
	.el-radio__input {
		visibility: hidden;
    }
	.el-cascader-node__postfix {
		top: 10px;
    }
}

最终效果: 2023-06-06-11-58-16.gif