He usado el complemento vue-easytable versión 2.8.2 para mostrar una tabla dentro de un componente Vue. Tengo un problema para encontrar cómo mostrar condicionalmente una columna de tabla.
En una demostración que se muestra aquí, cuando los interruptores "Row Radio" o "Row Checkbox" están activados, podemos ver que se agrega una columna a la tabla de demostración de forma dinámica. Así que creo que esta característica/funcionalidad ya debería estar allí en vue-easytable, pero no pude encontrar cómo lograr esto consultando la documentación.
Dentro de mi componente Vue, la matriz de columnas que paso a vue-easytable es la siguiente.
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", } ]Quiero mostrar la columna "Entidad" cuando se cumple una condición. ¿Qué debo hacer para lograr eso?
Puede encontrar la documentación de vue-easytable aquí .
En el código fuente de la demostración, la columna se agrega a la matriz de columnas de la siguiente manera:
if (this.enableRowCheckbox) { columns.push({ field: "checkbox", key: "checkbox", title: "", width: 100, fixed: this.enableColumnFixed ? "left" : "", type: "checkbox", }); }Para su caso de uso, es mejor que configure la opción defaultHiddenColumnKeys y/o los métodos de instancia hiddenColumnsByKeys y showColumnsByKeys. Vea el enlace para ver ejemplos.
O puede usar cellStyleOption , así:
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'; } }, },