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

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

相关推荐
大猩猩X7 分钟前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come1123444 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志1 小时前
TypeScript结构化类型初探
javascript
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景3 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再3 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5553 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
FogLetter3 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css