vue-easytable 插件有条件地显示列答案

【问题标题】：vue-easytable plugin conditionally show columnsvue-easytable 插件有条件地显示列
【发布时间】：2021-11-03 06:24:05
【问题描述】：

我使用 vue-easytable 插件版本 2.8.2 在 Vue 组件中显示表格。我在查找如何有条件地显示表格列时遇到问题。

在here 中显示的演示中，当打开“Row Radio”或“Row Checkbox”开关时，我们可以看到动态添加到演示表中的列。所以我认为这个特性/功能应该已经存在于 vue-easytable 中，但是参考文档我找不到如何实现这一点。

在我的 Vue 组件中，我传递给 vue-easytable 的列数组如下。

columns: [
        {
          field: "entity",
          key: "c",
          title: "Entity",
          align: "left",
          sortBy: "asc",
        },
        {
          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",
        }
    ]

我想在满足条件时显示“实体”列。我应该怎么做才能做到这一点？

您可以找到 vue-easytable 文档here。

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

在演示的source code 中，列被添加到列数组中，如下所示：

if (this.enableRowCheckbox) {
                columns.push({
                    field: "checkbox",
                    key: "checkbox",
                    title: "",
                    width: 100,
                    fixed: this.enableColumnFixed ? "left" : "",
                    type: "checkbox",
                });
            }

对于您的用例，您最好设置 defaultHiddenColumnKeys 选项和/或 hiddenColumnsByKeys 和 showColumnsByKeys 实例方法。示例见链接。

或者你可以使用cellStyleOption，像这样：

cellStyleOption: {
                    headerCellClass: ({ column }) => {
                        if (column.field === "entity") {
                            return someCondition?'text-visible-class':'text-hidden-class';
                        }
                    },
                        bodyCellClass: ({ column }) => {
                        if (column.field === "entity") {
                            return someCondition?'text-visible-class':'text-hidden-class';
                        }
                    },
                },

【讨论】：