问题原因:

二级选中 但是三级没有的情况下点击清空。会导致清不掉. 组件的选中是以最后一级为准，组件自带的clearCheckedNodes会有问题 所以需要我们去手动清除。

附上源码文件： node_modules\element-ui\packages\cascader-panel\src\cascader-panel.vue

接下来直接上解决代码

<!-- 前两级是工种分类，最后一级是工种 三级选择器 -->
<template>
  <el-cascader
    v-model="select"
    :options="list"
    :props="props"
    clearable
    collapse-tags
    style="width: 100%;"
    :placeholder="placeholder"

    @change="change"
    :disabled="$attrs.disabled"
    ref="cascader"
  >
  </el-cascader>
</template>
<script lang="ts">
 
  export default class extends Vue {
    // el-cascader-panel组件实例 重点
    panel: any = null
    @Ref('cascader') cascader: any
    mounted() {
       // 拿到组件实例
      this.panel = this.cascader.$refs.panel
    }


    // 配置项 一些配置项可以无视
    props: any = {
      multiple: false
    }
    select: string | Array<string> = ''
    list: Array<WorkTypeCategoryTreeWithWorkType> = []

    async created() {
       // 请求
    }
    
    
    @Watch('value')
    watchValue(val: string | Array<string>) {
      // 看这边 看这边 重点  外部如果把数据清空了 手动删除
      this.select = Array.isArray(val) ? cloneDeep(val) : val
      if (!val || !val?.length) {
        this.clear()
      }
    }

    @Emit('input')
    change() {
      return this.select
    }

    // 问题原因: 二级选中 但是三级没有的情况下点击清空。会导致清不掉. 组件的选中是以最后一级为准
    // 自带的clearCheckedNodes会有问题 所以手动清除
    // 源码文件 node_modules\element-ui\packages\cascader-panel\src\cascader-panel.vue
    clear() {
      this.panel.getCheckedNodes().forEach((node: any) => {
        node.doCheck(false)
      })
    }
  }
</script>