vue3新增修改页面，字段来源于其他表

<el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close append-to-body width="600px">
      <el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="分类名称" prop="categoryName">
              <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="关联单位" prop="unitId">
            <el-select v-model="form.unitId" filterable clearable placeholder="请选择">
              <el-option
                v-for="item in unitOptions"
                :key="item.unitId"
                :label="item.unitName"
                :value="item.unitId"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

const unitOptions = ref<AdspunitVO[]>([]);
const listAdspunitAllLocal = async () => {
  if(!unitOptions.value.length){
    const resUnit = await listAdspunitAll();
    unitOptions.value = resUnit.data;
  }
}
// 单位生成 ID-Name 映射字典  
const idToNameUnitMap = computed(() => {  
  return unitOptions.value.reduce((map, item) => {  
    map[item.unitId] = item.unitName;  
    return map;  
  }, {});  
});

// 格式化函数  
const idUnitFormatter = (row, column, cellValue) => {  
  if(!cellValue){
    return;
  }
  return idToNameUnitMap.value[cellValue] || '';  
};
onMounted(() => {
  getList();
listAdspunitAllLocal();
});

比如以上关联单位字段来源于其他表

列表展示

        <el-form-item label="班级类型" prop="typeId">
          <el-select v-model="form.typeId" placeholder="请选择班级类型" clearable>
            <el-option v-for="classtype in classTypeList" :key="classtype.typeId" :label="classtype.typeName"
                      :value="classtype.typeId"/>
          </el-select>
        </el-form-item>

const classTypeList = ref([]); //班型选择
const initOptionClassType = async () => {
    const classTypeRes = await optionSelectClassType();
    classTypeList.value = classTypeRes.data;
};

const idToClassTypeNameMap = computed(() => {
  return classTypeList.value.reduce((map, item) => {  
    map[item.typeId] = item.typeName;  
    return map;  
  }, {});  
});
const typeClassFormatter = (row, column, cellValue) => {  
  if(!cellValue){
    return;
  }
  return idToClassTypeNameMap.value[cellValue] || '';  
};

onMounted(() => {
  initOptionClassType();
  getList();
});