element UI 之 el-cascader 下拉多级单选，每一级均可选中

需求：element ui 中下拉多级单选，可选中每一级，如图：

封装了一个组件：

select.vue
template 中代码

<el-cascader
    ref="cascader"
    class="cascader-box"
    v-model="selectId"
    :disabled="disabled"
    :options="options"
    :props="{ value: 'value', label: 'label', checkStrictly: true,  expandTrigger: 'hover' }"
    :show-all-levels="false"
    clearable
    @change="changeFn">
    <template slot-scope="{ node, data }" class="cascader-item">
      <span class="select-item" @click="handleSelect">{{data.name}}</span>
    </template>
 </el-cascader>

script 中代码

export default {
  props:['value','disabled'],
  model:{
    prop: "value",
  },
  data(){
    return{
      selectId: this.value,
      options: [{
        label:'测试1',
        value:'1',
        children:[{
          label:'测试1-1',
          value:'1-1',
        }]
      },
      {
        label:'测试2',
        value:'2',
        children:[{
          label:'测试2-1',
          value:'2-1',
          children:[{
	          label:'测试2-1-1',
	          value:'2-1-1',
	        }]
        }]
      }
      ] //下拉选择框数组
    }
  },
  watch:{
   value:function(val){
     this.selectId = val
   },
   selectId:{ //监听选中id变化,当为最后一层级选中时下拉框关闭
     handler() {
        if (this.$refs.cascader) { 
          var children = this.$refs.cascader.getCheckedNodes();
          if(children.length>0&&children[0].children.length < 1){   //判断有没有下级
            this.$refs.cascader.dropDownVisible = false; //监听值发生变化就关闭它
          }
        }
      },
   }
  },
  mounted() {
     
  },
  methods: {
    changeFn(){
      this.$emit("input", this.selectId)
    },
    handleSelect(e){
     let parentPreviousElement = e.target.parentElement.previousElementSibling
     let inputRadio = parentPreviousElement.children[0].children[1]
     inputRadio.click()
    }
  },
}

引用select.vue 组件

 <v-select v-model="id"></v-select>