芋道源码:把列表中的id显示为对应的标题
一、这个主要是vue端的操作,首先引入请求方法
import { SchoolApi, SchoolVO } from '@/api/course/school'
二、设置初始值并通过方法调用请求,这一步重点是把请求结果赋值给schoolList
//设置初始值
const schoolList = ref([{id:0,sortName:"加载中……"}])
//设置请求方法
const getSchoolList = async() =>{
loading.value = true
try {
schoolList.value = await SchoolApi.getSchoolList()
} finally {
loading.value = false
}
}
/** 初始化时调用方法 **/
onMounted(() => {
getList()
getSchoolList()
})
三、设置一个方法通过ID取到名称
const formatSchoolName = (row) => {
if (!row || typeof row !== 'object') return ''; // 防御性代码,确保 row 不为 undefined
// 根据 schoolId 查找对应的学校名称
const school = schoolList.value.find(item => item.id === row.schoolId);
return school ? school.sortName : row.schoolId;
}
四、在列表处对应的位置调用这个方法 :formatter=”formatSchoolName”
<el-table-column label="学校" align="center" prop="schoolId" :formatter="formatSchoolName"/>


