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