芋道源码:把列表中的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"/>