pemalam vue-easytable secara bersyarat memaparkan lajur

Question

Saya menggunakan pemalam vue-easytable versi 2.8.2 untuk memaparkan jadual di dalam komponen Vue. Saya menghadapi masalah mencari cara untuk memaparkan lajur jadual secara bersyarat.

Dalam demo yang ditunjukkan di sini, apabila suis Row Radio atau Row Checkbox dihidupkan, kita dapat melihat lajur ditambah secara dinamik pada jadual demo. Jadi saya rasa ciri/fungsi ini sepatutnya sudah wujud dalam vue-easytable, tetapi saya tidak dapat mencari cara untuk melaksanakan ini merujuk kepada dokumentasi.

Dalam komponen Vue saya, tatasusunan lajur yang saya hantar ke vue-easytable adalah seperti berikut.

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

Saya ingin memaparkan lajur "Entiti" apabila syarat dipenuhi. Apakah yang perlu saya lakukan untuk mencapai ini?

Anda boleh mendapatkan dokumentasi mudah vue di sini.

Answer 1

Dalam kod ditunjukkan dalam sumber, lajur ditambahkan pada tatasusunan lajur seperti ini:

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

Untuk kes penggunaan anda, anda sebaiknya tetapkan pilihan defaultHiddenColumnKeys dan/atau kaedah contoh hiddenColumnsByKeys dan showColumnsByKeys. Lihat pautan untuk contoh.

Atau anda boleh menggunakan cellStyleOption seperti yang ditunjukkan di bawah:

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