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

Question

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

在此处显示的演示中，当打开“行单选”或“行复选框”开关时，我们可以看到一列被动态添加到演示表中。所以我认为这个特性/功能应该已经在 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 文档。

Answer 1

在源中演示的代码，列被添加到列数组中，如下所示：

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';
                        }
                    },
                },