vue-easytable 2.8.2版本如何实现表格列的条件显示功能？

你可以通过两种方案实现列的条件展示，2.8.2版本vue-easytable原生支持该能力：

方案1：使用列配置内置的visible属性（推荐） #

该版本列配置项原生支持visible参数，接收布尔值，值为false时对应列自动隐藏。要实现响应式的条件显隐，将columns定义为计算属性即可：

// data中定义你的条件变量
data() {
  return {
    // 业务条件变量，可根据逻辑动态修改值
    isShowEntityColumn: false,
    // 其他表格相关配置...
  }
},
computed: {
  columns() {
    return [
        {
          field: "entity",
          key: "c",
          title: "Entity",
          align: "left",
          sortBy: "asc",
          // 绑定条件，满足时展示列
          visible: this.isShowEntityColumn
        },
        {
          field: "version",
          key: "d",
          title: "Version",
          align: "center",
        },
        {
          field: "test_date",
          key: "e",
          title: "Test Date",
          align: "center",
        },
        {
          field: "score",
          key: "f",
          title: "Score",
          align: "center",
        },
        {
          field: "score_percentage",
          key: "g",
          title: "Score (%)",
          align: "center",
        },
        {
          field: "result",
          key: "h",
          title: "Result",
          align: "center",
        }
    ]
  }
}

后续只要修改isShowEntityColumn的值，表格会自动更新列的显隐状态。

方案2：动态拼接列数组 #

如果你的业务逻辑更复杂，需要动态增减列而非简单显隐，可以在计算属性中根据条件拼接列数组：

computed: {
  columns() {
    // 固定展示的列
    const baseColumns = [
      {
        field: "version",
        key: "d",
        title: "Version",
        align: "center",
      },
      {
        field: "test_date",
        key: "e",
        title: "Test Date",
        align: "center",
      },
      {
        field: "score",
        key: "f",
        title: "Score",
        align: "center",
      },
      {
        field: "score_percentage",
        key: "g",
        title: "Score (%)",
        align: "center",
      },
      {
        field: "result",
        key: "h",
        title: "Result",
        align: "center",
      }
    ]
    // 条件满足时将Entity列插入到指定位置
    if (this.isShowEntityColumn) {
      baseColumns.unshift({
        field: "entity",
        key: "c",
        title: "Entity",
        align: "left",
        sortBy: "asc",
      })
    }
    return baseColumns
  }
}

两种方案都可以稳定实现需求，优先选方案1即可，性能更好且不需要额外调整列的排序逻辑。

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