elementUI中遇到的一些问题（不知道是不是bug）

在使用Cascader级联选择器的时候，遇到了一些小问题

第一个问题：从后台读取完数据后，使用级联选择器，但是那个级联的弹框非常大，和官方文档中的形状完全不一样，搞得我十分难受，于是就想着，改一下css样式不就完了嘛，打开控制台

找到了最顶上的那个类，搞一下他，最开始我是在vue组件中的style中修改

.el-cascader-panel {
  width: 360px;
  height: 300px;
}

 

然后再次运行代码，发现没有效果，才发现，在这个组件里面根本就没有用到这个类，这个类是在渲染出来的代码中使用的，再仔细一思考，我可以在总的css文件中添加这个代码呀，于是乎就在这个总css文件中添加这个代码，再次运行，结果完美

 但是这个只能使用两级，如果有第三级的时候就出问题了，所以，再次修改css代码，el-cascader-menu__list是管每一级的宽度和高度

.el-cascader-menu__list {
  width: 180px;
  height: 300px;
}

 结果如下，就算有在多的级数也不会有问题

第二个问题：大小的问题解决了，但是这个只能选择第二级的内容，第一级选择不了，于是又找官方文档，在版本2.12.0中发现在props中添加属性 checkStrictly 为true就可以，代码如下：

 
          


所绑定的相关数据
 cascaderProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        checkStrictly: true
        // multiple: true
      }

貌似在之前的版本中是直接在 el-cascader 标签中添加 change-on-select 这个属性就可以实现选择一级的内容

但是这个时候才发现   只能点击圆圈才能选中，点击文字 label 没有效果，心里一度火大，难受

这时候只有百度了，然后发现有大佬同样遇到了这个问题，链接在这里https://blog.csdn.net/qq_36410795/article/details/100894520

跟着上面的思路看一遍就可以了

抄了一段代码（假装是自己写的）

mounted() {
    setInterval(function() {
      document.querySelectorAll('.el-cascader-node__label').forEach(el => {
        el.onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click()
        }
      })
    }, 1000)
  }

最后问题解决