elementUI的级联选择器: 功能,勾选任意一级并消失,hover展示方式

232 阅读1分钟

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