el-cascader 联级选择器

需求：根据公司id获取部门
数据：后台的接口获取公司列表根据公司id获取部门列表
options是一个数组用来渲染选择器的数组，[ {value:'', label: '',children: []} ]

image.png

<el-cascader
   separator=">"
   @change=“change
    v-model="cascaderValue"
   :options="options"></el-cascader>
<script>
export default {
  data() {
     return {
      cascaderValue: []
    }
  },
  async mounted() { //获取后台数据，写成需要的的数据结构
    await getListCompanys().then(res => {
      let data = res.data.lists.map(item => ({
        ...item,
        value:item.id,
        label:item.name,
        children:[]
      }))
      data.map((item, index)=> {
        getListDepartments({params:{companyId:item.id}}).then(res => {
          data[index].children = res.data.lists.map(item => ({
            ...item,
            value:item.id,
            label:item.name,
          }))
        })
      })
      this.options = data
    })
  }，
  methods:{
    change(v) {
        console.log(v)// ["2","3"] 一次为一级二级的值
    }
  }
}
</script>

回显和设置默认值的时候按照获取到的值的格式

 this.cascaderValue = ["2","3"]