遇到的问题:
vue项目中需要使用element的el-cascader组件,并且可以选择任意一级的内容。还要去掉前面的radio标签。
问题分析:
element的el-cascader组件级联选择器,通过 props.checkStrictly = true
来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。但是体验感不强,需要点中小圆圈才可以选中,如果项目中使用了懒加载的话,还需要再点击文字加载下一级,这样子体验感很差。又或者说不需要点radio标签,而是点击文字呢?
解决方法:
直接上代码展示解决方案。
<div class="block">
<span class="demonstration">单选选择任意一级选项</span>
<el-form-item label="所在地区" prop="address">
<el-cascader
ref="cascader"
v-modle="dataList.address"
:options="options"
:props="{
checkStrictly: true, //1、checkStrictly: true 设置父子节点取消选中关联,从而达到选择任意一级选项的目的。
expandTrigger:'hover' //2、expandTrigger:'hover' 解决使用懒加载因为有遮罩层,而无法点击文字选择下一层问题。
}"
@change="cascaderChange"
clearable></el-cascader>
</el-form-item>
</div>
<script>
data:{
return{
dataList:{
address:""
},
options:[] //省市区数组集合
}
},
mounted () {
//第二种js方法:点击文字时自动选中radio标签
setInterval(function () {
document.querySelectorAll('.el-cascader-node__label').forEach(el => {
el.onclick = function () {
if (this.previousElementSibling) this.previousElementSibling.click()
}
})
}, 1000)
},
methods:{
//所在省市区选择事件
cascaderChange(val) {
this.$refs.cascader.toggleDropDownVisible(); //地区选择之后将下拉框界面收起
console.log(val); //获取的id值['10001','10011']
},
}
</script>
<style>
/*第一种css方法:使用css将小圆圈变透明然后覆盖在整个文字上方,点击文字的时候其实是在点击小圈圈。*/
/*以下样式将单选框隐藏,并绝对定位与文字内容一样大小,这样点击时可以点击整行文字*/
.el-cascader-panel .el-radio{
position:absolute;
z-index:10;
padding:0 10px;
width:132px;
height:34px;
line-height:34px;
}
.el-cascader-panel .el-radio__input{
visibility:hidden;
}
.el-cascader-panel .el-input-node__postfix{
top:10px;
}
</style>