element-puls+vue3+ts 实现穿梭框数据回显

html

<el-transfer v-model="typeWork" filterable filter-placeholder="请输入行业工种名称" :titles="['行业工种', '已选择行业工种']" :data="data" />

js

<script lang="ts" setup name="sysEditOrg">
    import { onMounted, reactive, ref, watch } from 'vue';
    // 穿梭框
    const generateData = () => {
        const data: any = [];
        industry.list = industry.list.filter((u: any) => u.pid != 0);
        industry.list.forEach((city: any) => {
            data.push({
                label: city.name,
                key: city.id,
                initial: city,
            });
         });
         return data;
    };
    const industry = reactive({ list: [] as any });//穿梭框数据
    const typeWork = ref();
    const data = ref<any[]>(); 
    onMounted(async () => {
        let indusArr = await getIndustryList(); //请求接口获取数据	
        industry.list = indusArr.data.result;
        data.value = generateData();
    });
    onMounted(async () => {
        data.value = generateData();
    });
    // 打开编辑
    const editList = (row: any) => {
        dialogFormVisible.value = true;
        let arrId: any = [];
        //row.industrys接口返回已经选择的穿梭框数据
        row.industrys.filter((v: any) => {
            arrId.push(v.id);//关键点！！！！ v.id必须和generateData方法data  push的key一样
        });
        typeWork.value = arrId;
    };
 </script>