关于element中el-cascader的使用方式

cityList: [
    {
        id: 1,
        name: '北京',
        child: [
            id: 11,
            name: '大兴区',
            child: [
                id: 111,
                name: '亦庄'
            ]
        ]
    }
]

<template>
<el-cascader
    :options="cityList"
    :props="optionProps"
    v-model="selectedOptions"
    @change="handleChange">
</el-cascader>
</template>

<script>
data: {
    optionProps: {
        value: 'id',
        label: 'name',
        children: 'child'
    }
}
</script>

  <el-select v-model="type" @change="getCascader" placeholder="请选择类型">
    <el-option
      v-for="item in type"
      :key="item.typeValue"
      :label="item.typeName"
      :value="item.typeValue"
    />
  </el-select>
  <el-cascader
    :options="cascaderOption"
    :props="props"
    v-model="cascaderValue"
    collapse-tags
    :placeholder="请先选择类型"
  />

getCascader() {
  this.cascaderValue= []      
  getCascader(this.type).then(response => {
    this.cascaderOption = response.data.data
  });
}

<el-cascader
   :options="cascaderOption"
   :props="props"
   :disabled="optionsChanged"
   v-model="cascaderValue"
   collapse-tags
   :placeholder="showPlaceholder"
 />

getCascader() {
  this.cascaderValue= []      
  getCascader(this.type).then(response => {
  if(response.data.data.length === 0){
      this.optionsChanged = true
      this.showPlaceholder = '暂无范围'
      return
    }
    this.cascaderOption = response.data.data
  });
}

this.type = ['1','2']

<el-cascader
	:key="isResouceShow"
   :options="cascaderOption"
   :props="props"
   :disabled="optionsChanged"
   v-model="cascaderValue"
   collapse-tags
   :placeholder="showPlaceholder"
 />

getCascader() {
  this.cascaderValue= []
  ++this.isResouceShow      
  this.showPlaceholder = '请先选择所属范围'
  getCascader(this.type).then(response => {
	  if(response.data.data.length === 0){
	      this.optionsChanged = true
	      this.showPlaceholder = '暂无范围'
	      return
	    }
  this.cascaderOption = response.data.data
  });
}