Element-ui Cascader 级联选择器 点击lable 选中 以及选中收缩下拉框

效果图如下:

          <el-cascader
            ref="cascaderHandle"
            size="small"
            clearable
            style="width: 100%"
            v-model="ruleAddForm.categoryValues"
            :options="ascaderOptions"
            :props="{
              checkStrictly: true,
              expandTrigger: 'hover',
              value: 'cat_id',
              label: 'cat_name',
            }"
            @change="handleChange"
          >
          </el-cascader>

 // 切换cascader事件
    handleChange (val) {
      this.ruleAddForm.categoryValues = val
      this.$refs.cascaderHandle.dropDownVisible = false // 监听值发生变化就关闭它
    },

选择任意层级点击文字即选中及点击就收缩效果代码

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

感谢下方两个博主!
参考地址1
参考地址2