Vue Bootstrap中如何将两个不同字段值显示在同一表格列？

下面提供三种可行方案，帮你把student_name和name字段的值统一显示在表格的「Name」列中：

方案一：预处理数据（推荐） #

在拿到后端数据后，统一字段名称，让表格逻辑更清晰：

<template>
  <b-table :items="student_data" :fields="fields">
    <template v-slot:cell(name)="{ value }">
      <div class="text-truncate" style="max-width: 150px;">
        {{ value }}
      </div>
    </template>
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      student_data: [],
      fields: [
        { key: "no", label: "No", sortable: false },
        { key: "name", label: "Name", sortable: true },
        { key: "birthday", label: "Birthday", sortable: true },
      ]
    }
  },
  created() {
    // 模拟后端返回的原始数据
    const rawData = [
      { student_name: "John Doe", birthday: "Aug, 4 2008" },
      { name: "Jane Doe", birthday: "Dec, 25 2003" },
    ]
    // 统一字段：优先取student_name，没有则取name
    this.student_data = rawData.map(item => ({
      ...item,
      name: item.student_name || item.name
    }))
  }
}
</script>

方案二：使用字段的formatter函数 #

无需修改原始数据，直接在配置字段时添加格式化逻辑：

<template>
  <b-table :items="student_data" :fields="fields">
    <template v-slot:cell(name)="{ value }">
      <div class="text-truncate" style="max-width: 150px;">
        {{ value }}
      </div>
    </template>
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      student_data: [
        { student_name: "John Doe", birthday: "Aug, 4 2008" },
        { name: "Jane Doe", birthday: "Dec, 25 2003" },
      ],
      fields: [
        { key: "no", label: "No", sortable: false },
        { 
          key: "name", 
          label: "Name", 
          sortable: true,
          // 自定义格式化逻辑
          formatter: (_, __, item) => item.student_name || item.name
        },
        { key: "birthday", label: "Birthday", sortable: true },
      ]
    }
  }
}
</script>

方案三：自定义单元格插槽直接处理 #

在插槽中直接判断当前数据项的字段：

<template>
  <b-table :items="student_data" :fields="fields">
    <template v-slot:cell(name)="{ item }">
      <div class="text-truncate" style="max-width: 150px;">
        {{ item.student_name || item.name }}
      </div>
    </template>
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      student_data: [
        { student_name: "John Doe", birthday: "Aug, 4 2008" },
        { name: "Jane Doe", birthday: "Dec, 25 2003" },
      ],
      fields: [
        { key: "no", label: "No", sortable: false },
        { key: "name", label: "Name", sortable: true },
        { key: "birthday", label: "Birthday", sortable: true },
      ]
    }
  }
}
</script>

你的原有代码失效原因 #

1. fields配置中的key不支持数组格式，b-table仅接受单个字符串作为字段标识；
2. 插槽写法错误：v-slot:cell(name)=data的语法不正确，且items、:fields是b-table的属性，不能写在插槽上。

内容的提问来源于stack exchange，提问作者Shannia