@xlaoyu/el-table-fixed-scrollbar NPM

element table fixed bottom scrollbar directive

Features

fixed el-table bottom scrollbar when it's height is too high

Instalation

Using module bundlers

# install dependency
npm install --save @xlaoyu/el-table-fixed-scrollbar

// import on your project (less then 1KB gziped)
import ElTableFixedScrollbar from '@xlaoyu/el-table-fixed-scrollbar'
Vue.use(ElTableFixedScrollbar)

Browser

<body>
  <div id="app">
    <div id="wrapper-id">
      <el-table v-fixed-bottom-scrollbar="{startFixed: 230, container: '#wrapper-id'}"></el-table>
    </div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue2-smooth-scroll"></script>
  <script>
  Vue.use(ElTableFixedScrollbar);
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>
</body>

Usage

<div id="wrapper-id">
  <el-table v-fixed-bottom-scrollbar="{startFixed: 230, container: '#wrapper-id'}"></el-table>
</div>

Custom options

Defaults

  {
    startFixed: 0, // Distance from top of table to top of browser window when to start fix scrollbar
    container: '', // default is window, the scroll container, use document.querySelector to query the Element
  }

License

MIT

vue element table fixed scrollbar

0.1.0

4 years ago