Das Vue-Easytable-Plugin zeigt Spalten bedingt an

Question

Ich verwende das Vue-Easytable-Plugin Version 2.8.2, um die Tabelle in einer Vue-Komponente anzuzeigen. Ich habe Probleme damit, eine Tabellenspalte bedingt anzuzeigen.

In der hier gezeigten Demo können wir sehen, wie eine Spalte dynamisch zur Demotabelle hinzugefügt wird, wenn der Schalter „Row Radio“ oder „Row Checkbox“ aktiviert ist. Daher denke ich, dass diese Funktion/Funktion bereits in vue-easytable vorhanden sein sollte, aber ich kann anhand der Dokumentation nicht herausfinden, wie ich dies implementieren kann.

In meiner Vue-Komponente lautet das Spaltenarray, das ich an vue-easytable übergebe, wie folgt.

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",
        }
    ]

Ich möchte die Spalte „Entität“ anzeigen, wenn eine Bedingung erfüllt ist. Was muss ich tun, um dies zu erreichen?

Hier finden Sie die Vue-Easytable-Dokumentation.

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