Vue中Bootstrap Table内validationErrors不更新问题求解

原因确认 #

确实是由computed生成表格字段导致的。Vue的computed属性仅在其依赖的响应式数据发生变化时才会重新计算并返回新值。如果你的tableFields计算属性没有将validationErrors纳入依赖追踪，那么当validationErrors更新时，tableFields不会重新生成新的字段配置，Bootstrap Table也就无法获取到包含最新错误提示的字段定义，因此表格内的提示不会同步更新。

解决办法 #

1. 让tableFields依赖validationErrors #

在tableFields的计算逻辑中显式引用this.validationErrors，强制Vue将其加入依赖列表。这样当validationErrors变化时，computed会自动重新计算，生成新的字段配置供Bootstrap Table使用：

computed: {
  tableFields() {
    // 显式引用，触发依赖追踪
    this.validationErrors;
    // 原有的字段配置逻辑
    return [
      {
        field: 'weight',
        title: '重量',
        formatter: (value, row, index) => {
          const errorMsg = this.validationErrors[`row_${index}`];
          return `
            <input type="number" v-model="row.weight" />
            ${errorMsg ? `<span class="text-danger">${errorMsg}</span>` : ''}
          `;
        }
      }
      // 其他字段...
    ];
  }
}

2. 确保validationErrors的更新是响应式的 #

如果是给validationErrors对象新增属性，必须通过Vue的响应式方式更新，否则Vue无法感知变化：

// 错误写法：直接新增属性，非响应式
this.validationErrors[`row_${index}`] = '重量不能为0';

// 正确写法1：展开运算符重新赋值
this.validationErrors = {
  ...this.validationErrors,
  [`row_${index}`]: '重量不能为0'
};

// 正确写法2：使用Vue.set
Vue.set(this.validationErrors, `row_${index}`, '重量不能为0');

3. 手动触发Bootstrap Table刷新 #

如果上述方法仍不生效，可以在saveWeight方法完成校验后，手动调用Bootstrap Table的刷新方法，强制表格重新渲染：

methods: {
  async saveWeight() {
    // 遍历执行校验逻辑，更新validationErrors
    for (let index = 0; index < this.tableData.length; index++) {
      this.validateInput(index);
    }
    // 手动刷新表格
    this.$refs.bootstrapTable.refresh();
  }
}

注意：需要给Bootstrap Table组件添加ref="bootstrapTable"属性，才能通过$refs调用刷新方法。

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