Vue中Bootstrap Table截断错误信息，模态框展示完整内容实现方案

核心问题是你直接修改了原始数据的errorMessage字段，导致模态框拿到的也是截断后的数据。解决方案是保留原始完整数据，仅在表格展示层做截断处理，具体修改如下：

修改父组件代码 #

<template>
  <b-container>
    <b-card class="mt-4">
      <h5>{{ $t('events') }}</h5>
      <b-table
        :items="errors"
        :fields="fields"
        :per-page="[5, 10]"
        selectable
        :select-mode="'single'"
        @row-selected="onRowSelected"
        @row-clicked="showModal"
        sort-desc
      />
    </b-card>
    <error-log-entry-modal ref="errorLogEntryModal" :selected-error-log="selectedRows"/>
  </b-container>
</template>

<script>
import { errorService } from '@/services/error';
import ErrorLogEntryModal from '@/components/error-log/ErrorLogEntryModal';

export default {
  components: {
    ErrorLogEntryModal,
  },

  data() {
    return {
      errors: null,
      selectedRows: []
    };
  },
  computed: {
    fields() {
      return [
        {
          key: 'errorMessage',
          label: this.$t('message'),
          sortable: true,
          // 仅在表格显示时截断文本，添加省略号提示内容未完全展示
          formatter: (value) => value.substring(0, 30) + (value.length > 30 ? '...' : '')
        },
      ]
    },
  },
  methods: {
    load(){
      errorService.getErrorLogs().then(result => {
        // 保留原始完整数据，不修改errorMessage字段
        this.errors = result.data
      })
    },
    onRowSelected(fields){
      this.selectedRows = fields
    },

    showModal(){
      // 数组类型需判断长度，避免空数组误触发
      if (this.selectedRows.length) {
        this.$refs.errorLogEntryModal.show()
      }
    },
  },
  created() {
    this.load()
  }
};
</script>

子组件无需修改 #

子组件直接接收完整的selectedErrorLog数组，其中的errorMessage是原始完整内容，模态框会自动展示完整错误信息。

关键修改说明 #

• 保留原始数据：移除load方法中对errorMessage的截断操作，确保errors数组存储的是完整错误日志
• 表格层截断：通过Bootstrap Table的formatter函数，仅在表格渲染阶段处理显示文本，不影响原始数据
• 细节修正：修复导入名称笔误，调整showModal的判断逻辑，避免空数组触发模态框

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