需求：根據(jù)公司id獲取部門
數(shù)據(jù)：后臺的接口獲取公司列表根據(jù)公司id獲取部門列表
options是一個數(shù)組用來渲染選擇器的數(shù)組，[ {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() { //獲取后臺數(shù)據(jù)，寫成需要的的數(shù)據(jù)結(jié)構(gòu)
    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>

回顯和設(shè)置默認(rèn)值的時候按照獲取到的值的格式

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