Спрятать первую колонку в гриде по условию

Question

Есть в гриде колонка которую надо спрятать при определенных условиях. Логика вся сделана, с v-if всё работает хорошо, но несет некоторые последствия на остальные компоненты. Нужно реализовать через css . Завернуть в 2 класса и прописать display: none в стилях + повесить на класс метод, в зависимости от которого чекбоксы будут скрываться или отображаться. Сделал следующим образом, но логика метода не срабатывает + в узкую колонку с чекбоксами переходит соседняя колонка (сдвиг всех колонок по сути) и текст нечитаемый становится:

<div id="main-table">
    <el-table
        @selection-change="handleSelectionChange"
        @row-contextmenu="contextMenu"
        :span-method="objectSpanMethod"
        default-expand-all
        :tree-props="{children: 'applications'}"
    >
       <el-table-column
          type="selection"
          width="50"
          :span-method="objectSpanMethod"
          class-name = "first row checkbox-row"
          v-bind:class="{ 'checkbox-row': isCheckboxHidden }"

      ></el-table-column>

css:

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

    .checkbox-row {
      display:none;
    }

Answer 1

Нужно скрывать не колонку, а инпут в ней:

.checkbox-row input[type=checkbox] {
  display:none;
}

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 шт):