Почему после сворачивания и раскрытия левой и правой колонок, ширина таблицы изменяется и не возвращается к своей исходной ширине?

Question

Эммануил

css , vue

Почему после сворачивания и раскрытия левой и правой колонок, ширина таблицы изменяется и не возвращается к своей исходной ширине?

Как исправить проблему с таблицей "element plus", которая вызывает горизонтальный скролл и не возвращает исходную ширину при сворачивании левой или правой стороны таблицы? При использовании обычной таблицы такой проблемы нет. Вот ссылка на код.

27 сентября 2023 г. 9:37

Ответы на вопрос 1

Похожие вопросы

Answer 1

Это происходит потому, что в таблице "element plus" присутствует горизонтальный скролл, который резервирует некоторое пространство для отображения скроллбара. Когда вы сворачиваете левую или правую колонку, ширина таблицы не возвращается к своей исходной ширине, потому что пространство, зарезервированное для скроллбара, все еще остается.

Чтобы исправить эту проблему, вы можете добавить следующий CSS-код:

1. Добавьте класс "custom-scrollbar" к таблице:

```
<el-table :data="tableData" class="custom-scrollbar">
```

2. Добавьте следующий CSS-код в свой файл стилей:

```
.custom-scrollbar.el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

.custom-scrollbar.el-table--scrollable-x .el-table__header-wrapper {
  padding-bottom: 17px;
}
```

Этот код устанавливает свойство "overflow-x: auto" для обертки тела таблицы и "overflow-y: hidden" для скрытия скроллбара по вертикали. Кроме того, он также добавляет небольшую пустую область внизу обертки заголовка таблицы, чтобы компенсировать отсутствующую ширину, вызванную скрытием скроллбара.

После добавления этого кода таблица "element plus" должна корректно возвращать исходную ширину при сворачивании колонок.