芋道源码:把列表中的id显示为对应的标题

作者: gavin 分类: 未分类 发布时间: 2024-06-20 16:56

一、这个主要是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"/>