如何在Bootstrap Table计算属性中按用户角色配置字段显示？

完全可以在计算属性里直接实现，这是最简洁且符合Vue响应式逻辑的方式，不需要额外单独写方法。

方法一：动态生成字段数组 #

直接根据用户角色判断是否包含指定字段，返回对应的字段列表：

computed: {
  fields() {
    // 定义所有用户都能看到的基础字段
    const baseFields = [
      { key: 'selected', label: '' },
      { key: 'name', label: this.$t('name'), sortable: true },
      { key: 'email', label: this.$t('email'), sortable: true }
    ];

    // 仅系统管理员可见phone字段
    if (this.user.systemAdmin) {
      baseFields.push({
        key: 'phone',
        label: this.$t('phone'),
        sortable: true
      });
    }

    return baseFields;
  }
}

方法二：通过visible属性控制显示 #

如果需要保留所有字段定义，仅控制显示隐藏，可以给字段添加visible属性：

computed: {
  fields() {
    return [
      { key: 'selected', label: '' },
      { key: 'name', label: this.$t('name'), sortable: true },
      { key: 'email', label: this.$t('email'), sortable: true },
      { 
        key: 'phone', 
        label: this.$t('phone'), 
        sortable: true,
        visible: this.user.systemAdmin // 角色判断控制可见性
      }
    ];
  }
}

你之前代码报错的原因 #

1. 计算属性fields是返回新数组的，不能直接修改它的内容（Vue计算属性基于依赖缓存，直接修改不会触发响应式更新）
2. 代码里的phone没有加引号，应该是字符串'phone'；而且Bootstrap Table的fields是数组结构，不是对象，不能用this.fields[phone]这种对象属性的方式操作

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