Скрыть колонку из грида

Question

В общем суть такова: Есть таблица, первая колонка - с чекбоксами, их отображение нужно только в конкретных случаях. Я сделал логику отключения колонки с чекбоксами через v-if и всё отлично работало, но ввиду некоторых нюансов сказали поменять на v-show. При простой замене v-if на v-show логика работать перестаёт, чекбоксы не скрываются (видимо подавляет element-ui). Мне подсказали, что можно доработать стили чтобы v-show работал, типа сделать 2 класса чтобы точно акцентироваться на конкретной колонке и там уже сделать display: none; Сделал так:

<template>
  <div id="main-table">
    <el-table
        v-fixed-header
        :data="procedureData"
        style="width: 100%"
    >
      <el-table-column
          type="selection"
          width="50"
          :span-method="objectSpanMethod"
          class-name="first-row checkbox-row"
          v-show="isCheckboxHidden"
      >

стили:

<style lang="scss">
  #main-table {

    .first-row.checkbox-row {
      display: none;
    }

В итоге чекбоксы скрылись, но соседняя колонка встала на место колонки с чекбоксами, а ввиду маленькой ширины колонки весь текст поплыл. Как мне донастроить стили чтобы колонка с чекбоксами скрывалась, а остальные элементы оставались в своих колонках, просто сдвигаясь влево?

UPD: добавил скрин

Answer 1

Вместо

.first-row.checkbox-row {
  display: none;
}

Попробуй

.first-row.checkbox-row {
  visibility: hidden;
}

Answer 2

Не уверен, что кому-то поможет без глубокого контекста, но решение такое: (isCheckboxHidden - boolean)

  <el-table-column
                  type="selection"          
                  :width=" (isCheckboxHidden ? '1' : '50')"
                  :span-method="objectSpanMethod"
                  :class-name="'first row ' + (isCheckboxHidden ? 'hide-checkbox' : '')"

css:

.hide-checkbox {
  .el-checkbox {
    display: none;
  }
}

БЛОГ НА HUSL

Скрыть колонку из грида

Ответы (2 шт):