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

html 复制代码
<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>
javascript 复制代码
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();
});

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

相关推荐
Trust yourself2431 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统12 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead26 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
爱编程的喵2 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
唐叔在学习2 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr2 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js