Le plugin vue-easytable affiche les colonnes de manière conditionnelle

Question

J'utilise le plugin vue-easytable version 2.8.2 pour afficher le tableau à l'intérieur d'un composant Vue. J'ai du mal à trouver comment afficher conditionnellement une colonne de tableau.

Dans la démo présentée ici, lorsque le commutateur Row Radio ou Row Checkbox est activé, nous pouvons voir une colonne ajoutée dynamiquement à la table de démonstration. Je pense donc que cette fonctionnalité devrait déjà exister dans vue-easytable, mais je ne trouve pas comment l'implémenter en me référant à la documentation.

Dans mon composant Vue, le tableau de colonnes que je passe à vue-easytable est le suivant.

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

Je souhaite afficher la colonne "Entité" lorsqu'une condition est remplie. Que dois-je faire pour y parvenir ?

Vous pouvez trouver la documentation vue-easytable ici.

Answer 1

Dans le code démontré dans la source, les colonnes sont ajoutées au tableau columns comme ceci :

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

Pour votre cas d'utilisation, vous feriez mieux de définir l'option defaultHiddenColumnKeys et/ou les méthodes d'instance HiddenColumnsByKeys et showColumnsByKeys. Voir le lien pour des exemples.

Ou vous pouvez utiliser cellStyleOption comme indiqué ci-dessous :

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