如何在Vue Good Table中将两列合并为单列展示？

有两种常用方案可以实现你的需求，根据你使用的表格组件类型选择即可：

方案一：使用formatter函数（适合Element UI等支持formatter属性的表格组件） #

直接修改columns数组，新增formatter函数来拼接两个字段的内容：

data() {
  return {
    columns: [
      {
        label: 'Description',
        tdClass: 'text-center',
        thClass: 'text-center',
        sortable: false,
        // 自定义格式化函数，拼接两个字段
        formatter: (row) => {
          // 可根据需求调整分隔符，比如加斜杠、换行符等
          return `${row.actionDescription} ${row.groupDescription}`;
          // 如果需要处理空值，避免出现空字符串拼接的情况：
          // return `${row.actionDescription || ''} ${row.groupDescription || ''}`.trim();
        }
      }
    ]
  }
}

方案二：使用自定义插槽（适合需要自定义样式/布局的场景） #

如果需要更灵活的内容展示（比如换行、不同样式），可以用表格的自定义插槽：

第一步：修改columns数组 #

data() {
  return {
    columns: [
      {
        label: 'Description',
        tdClass: 'text-center',
        thClass: 'text-center',
        sortable: false
      }
    ]
  }
}

第二步：在表格模板中添加插槽 #

以Element UI的el-table为例：

<el-table :data="你的表格数据源" :columns="columns">
  <template #default="{ row }">
    <!-- 这里可以自由编写HTML结构，比如换行、添加样式 -->
    <span>{{ row.actionDescription }} - {{ row.groupDescription }}</span>
    <!-- 示例：分行显示 -->
    <!-- <div class="action-desc">{{ row.actionDescription }}</div> -->
    <!-- <div class="group-desc">{{ row.groupDescription }}</div> -->
  </template>
</el-table>

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