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

1. <el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close append-to-body width="600px">
2.       <el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px">
3.         <el-row>
4.           <el-col :span="12">
5.             <el-form-item label="分类名称" prop="categoryName">
6.               <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
7.             </el-form-item>
8.           </el-col>
10.           <el-col :span="12">
11.             <el-form-item label="关联单位" prop="unitId">
12.             <el-select v-model="form.unitId" filterable clearable placeholder="请选择">
13.               <el-option
14.                 v-for="item in unitOptions"
15.                 :key="item.unitId"
16.                 :label="item.unitName"
17.                 :value="item.unitId"
18.               ></el-option>
19.             </el-select>
20.           </el-form-item>
21.           </el-col>
22.         </el-row>
23.       </el-form>
24.       <template #footer>
25.         <div class="dialog-footer">
26.           <el-button type="primary" @click="submitForm">确 定</el-button>
27.           <el-button @click="cancel">取 消</el-button>
28.         </div>
29.       </template>
30.     </el-dialog>

复制代码

1. const unitOptions = ref<AdspunitVO[]>([]);
2. const listAdspunitAllLocal = async () => {
3.   if(!unitOptions.value.length){
4.     const resUnit = await listAdspunitAll();
5.     unitOptions.value = resUnit.data;
6.   }
7. }
8. // 单位生成 ID-Name 映射字典  
9. const idToNameUnitMap = computed(() => {  
10.   return unitOptions.value.reduce((map, item) => {  
11.     map[item.unitId] = item.unitName;  
12.     return map;  
13.   }, {});  
14. });
16. // 格式化函数  
17. const idUnitFormatter = (row, column, cellValue) => {  
18.   if(!cellValue){
19.     return;
20.   }
21.   return idToNameUnitMap.value[cellValue] || '';  
22. };
23. onMounted(() => {
24.   getList();
25. listAdspunitAllLocal();
26. });

复制代码

 

比如以上关联单元字段泉源于其他表


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。