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

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

相关推荐
鹏多多6 分钟前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆14 分钟前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
吃饺子不吃馅42 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼11 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手15 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
Hilaku15 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu15 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu15 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu15 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript