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();
});

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

相关推荐
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip7 小时前
Jst执行上下文栈和变量对象
前端·javascript
拉不动的猪8 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do8 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
DT——9 小时前
前端登录鉴权详解
前端·javascript
界面开发小八哥9 小时前
数据可视化图表库LightningChart JS v8.0上线:全新图例系统 + 数据集重构
javascript·信息可视化·数据可视化·lightningchart
烛阴10 小时前
【TS 设计模式完全指南】从“入门”到“劝退”,彻底搞懂单例模式
javascript·设计模式·typescript
java水泥工10 小时前
校园管理系统|基于SpringBoot和Vue的校园管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
正义的大古10 小时前
OpenLayers常用控件 -- 章节六:全屏控件教程
前端·javascript·html·openlayers
正义的大古12 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers