vue3 ts 二级联动

<template>
  <el-form-item label="公司" prop="companyId">
    <el-select v-model="ruleForm.companyId" placeholder="请选择公司名称" @change="hanldeChange">                 
       <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" />
     </el-select>
   </el-form-item>
   <el-form-item label="部门" prop="departmentId">
     <el-select v-model="ruleForm.departmentId" class="w300px" placeholder="请选择部门名称">
       <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id" />
     </el-select>
    </el-form-item>

<script setup lang="ts">
let companyList: any = ref([{}])
let departmentList: any = ref([{}])
</script>

需要注意的是，有的会在初始时，使用reactive的方法，但在引用接口数据时，在显示上会有问题

看方法

const hanldeChange = (val: any) => {
    //val就是一级分类的id值
    //先遍历所有的分类 里面包含一级和二级
    for (let i = 0; i < companyList.value.length; i++) {
        let oneSubject = companyList.value[i]
        //判断：所有一级分类id和点击一级分类id是否一样
        if (val === oneSubject.id) { //比较值和类型
            //从一级分类中获取所有的二级分类
            departmentList.value = oneSubject.childrenList
             //把二级分类Id值清空
            ruleForm.departmentId = ''
        }
    }
}

整体就是这样，需要注意的是，很多写vue2的小伙伴，在使用ref时，习惯性少了.value，致使方式调用了不生效的问题。以上就是分享的内容，谢谢各位观看的同学，同时也欢迎大佬的指教和点名不足之处。勿喷。谢谢！