elementUI的级联选择器
功能,勾选任意一级并消失,hover展示方式 组件部分代码
<el-cascader @change="changeCategory"
v-model="assetPhto.claNumberPath"
ref="category"
style="width: 202px"
clearable
:options="cagegory"
:props="assetProps">
</el-cascader>
复制代码
这里的v-model一定要有,不然自带的情况只会清楚输入框里的数据,而不是需要绑定的数据
接下来是生命周期,在mounted里面实现点击文字自动点击圆点
```
` let that = this
setInterval(function() {
// 解决级联选择器不点击圆点选中元素问题
document.querySelectorAll(".el-cascader-node__label").forEach(el => {
el.onclick = function() {
if (this.previousElementSibling) this.previousElementSibling.click();
};
});
}, 1000);``
**这个定时器一定要有,不然不会消失,会有bug
如果要隐藏圆点,可以写样式,但是写在组件里面不会生效,样式穿透,!important都不行,需要写在index.html里面**
.el-radio {
opacity: 0;
/* margin-right: 10px; */
/* right: 10px; */
}
.el-radio__inner {
border: 1px solid #DCDFE6;
border-radius: 100%;
width: 1px !important;
height: 14px;
background-color: #FFF;
cursor: pointer;
box-sizing: border-box;
}
样式如上
接下来是数据获取并隐藏,前提是给级联选择器绑定了ref
changedep () {
const departmentId = this.$refs.department.getCheckedNodes()
let numberPath = departmentId[0].data.numberPath.toString()
this.assetPhto.depNumberPath = numberPath
//重点就是这句,点击以后让dropDownVisible=false
this.$refs.department.dropDownVisible=false
},
```js
```