使用vue3 在el-table-column中的prop数据后面分别加上单位

需求：

在el-table-column的prop中的数据分别加上对应的运维单位（后端获取）每个不一样

代码：

html

<el-table-column label="XL等级(kV)" show-overflow-tooltip="" align="center">
          <template v-slot="{ row }">
            {{ row.levelName }} {{ getLevelName(row.pid) ? `(${getLevelName(row.pid)})` : '' }}
          </template>
        </el-table-column>

js：

const tableParams1 = ref({
  page: 1,
  pageSize: 10000,
  total: 0,
});
const getpageLineLevel = async () => {
  var res = await pageLineLevel(Object.assign(tableParams1.value));
  levellist.value = res.data.result?.items ?? [];
};
const bureau = ref()
const getLevelName=(pid:any)=> {
  if(levellist.value){
    for (let i = 0; i < levellist.value.length; i++) {
    const element = levellist.value[i];
    if(element.id==pid){
      bureau.value=element.bureauName
      return element.bureauName
    }
  }
  }
    }

这样就能实现每个后面都能是不同的单位了，如果后端没有某一条数据的话，就不显示那个括号