el table sticky

эль-стол-липкий

Плагин набора команд, используемый для реализации потолка заголовка таблицы, потолка хвоста таблицы, нижнего потолка полосы прокрутки и функций адаптации по высоте таблиц Element UI (Vue 2).

фон

При использовании табличного компонента пользовательского интерфейса Element, если в таблице слишком много содержимого, в таблице появятся полосы прокрутки, но заголовок таблицы не переместится вверх, а общее количество строк в конце таблицы будет не перемещаться вниз. Таким образом, если таблица содержит слишком много содержимого, заголовок таблицы и таблица не будут перемещаться вниз. Если имеется горизонтальная полоса прокрутки, необходимо перейти к ней. внизу каждый раз, когда вы хотите прокрутить. Эта серия болевых точек сильно влияет на взаимодействие с пользователем.

Решение для пользовательского интерфейса элемента : выполните вышеуказанные требования, установив атрибут max-height или height .

Недостатки Element UI : значение высоты поддерживает установку только числовых значений, и в реальной разработке часто приходится использовать JS для его вычисления.

Чтобы решить вышеуказанные проблемы/потребности и снизить затраты на разработку и обслуживание, был создан этот плагин. Подробности см. в анализе идеи.

характеристика

Некоторые инструкции основаны на атрибуте position: sticky , поэтому поддерживаются только современные браузеры, онлайн-примеры.

• Поддержка потолка заголовка (v-sticky-header)
• Хвост опорного стола, нижний присос всего ряда (v-липкий колонтитул)
• Поддержка горизонтального прокрутки нижней части полосы прокрутки (v-sticky-scroller)
• Адаптивная высота опоры (v-height-adaptive)

Установить

npm install @cell-x/el-table-sticky

Инструкция по регистрации

Инструкции по глобальной регистрации:

 import elTableSticky from '@cell-x/el-table-sticky'

Vue . use ( elTableSticky )

// 或者

Vue . use ( elTableSticky , {
  StickyHeader : {
    // 吸顶偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetTop : 0 ,
    // 滚动条吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  StickyFooter : {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  StickyScroller : {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  HeightAdaptive : {
    // 底部偏移量，只能是数字型
    offsetBottom : 0 ,
  }
} )

Частичная инструкция по регистрации:

 import {
  StickyHeader ,
  StickyFooter ,
  StickyScroller ,
  HeightAdaptive ,
} from '@cell-x/el-table-sticky'

export default {
  directives : {
    StickyHeader : new StickyHeader ( { offsetTop : 0 , offsetBottom : 0 } ) . init ( ) ,
    StickyFooter : new StickyFooter ( { offsetBottom : 0 } ) . init ( ) ,
    StickyScroller : new StickyScroller ( { offsetBottom : 0 } ) . init ( ) ,
    HeightAdaptive : new HeightAdaptive ( { offsetBottom : 0 } ) . init ( ) ,
  }
} 

использовать

 < el-table v-sticky-header > ... </ el-table >
< el-table v-sticky-footer > ... </ el-table >
< el-table v-sticky-scroller > ... </ el-table >
< el-table v-height-adaptive > ... </ el-table > 

Параметры команды

инструкция	иллюстрировать	модификатор	тип	значение по умолчанию
v-sticky-header	Команда потолка заголовка	.always	Object{Number, String}	смещениеTop: 0, смещениеBottom: 0
v-sticky-footer	Итоговая строка в конце таблицы — это команда нижнего сосания.	.always	Object{Number, String}	смещениеBottom: 0
v-sticky-scroller	Команда нижней части горизонтальной полосы прокрутки	.always	Object{Number, String}	смещениеBottom: 0
v-height-adaptive	Высокоадаптивные инструкции	-	Object{Number}	смещениеBottom: 0

На что следует обратить внимание

• v-sticky-header и v-sticky-footer имеют встроенную функцию прокрутки полосы прокрутки, поэтому нет необходимости повторно использовать команду v-sticky-scroller
• Когда v-sticky-header и v-sticky-footer используются одновременно, полоса прокрутки offsetBottom основана на v-sticky-footer
• Режим отображения горизонтальной полосы прокрутки по умолчанию — hover , которое можно изменить на постоянное отображение, установив модификатор .always
• Директива v-height-adaptive не зависит от атрибута position: sticky и может использоваться отдельно.

Настройка проекта

yarn install
# Compiles and hot-reloads for development
yarn serve
# Compiles and minifies for production
yarn build
# Compiles and minifies for production with demo
yarn build:demo
# Lints and fixes files
yarn lint

Настройте конфигурацию, см. Справочник по конфигурации.