我使用 vue-easytable 插件版本 2.8.2 在 Vue 组件内显示表格。我在寻找如何有条件地显示表格列时遇到问题。
在此处显示的演示中，当打开“行单选”或“行复选框”开关时，我们可以看到一列被动态添加到演示表中。所以我认为这个特性/功能应该已经在 vue-easytable 中存在了，但是我参考文档找不到如何实现这一点。
在我的 Vue 组件中，我传递给 vue-easytable 的列数组如下。
1
1109columns: [
{
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 文档。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
在源中演示的代码，列被添加到列数组中，如下所示：
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'; } }, },