table-horizontal-scroll

0.2.4 • Public • Published

el-table-horizontal-scroll

let el-table show horizontal scroll-bar at bottom

中文文档

How to use

install

npm install table-horizontal-scroll

register directive

import horizontalScroll from 'table-horizontal-scroll'
Vue.use(horizontalScroll)

or

import horizontalScroll from 'table-horizontal-scroll'

export default {
    directives: {
        horizontalScroll
    }
}

use

<el-table
  :data="data"
  v-horizontal-scroll
>
  <el-table-column
    fixed="left"
    label="a"
    prop="a"
  ></el-table-column>
  <el-table-column
    label="b"
    prop="b"
  ></el-table-column>
  <el-table-column
    label="c"
    prop="c"
  ></el-table-column>
  <el-table-column
    label="d"
    prop="d"
    width="1600"
  ></el-table-column>
</el-table>

props

you can use always or hover

default is hover, the bar will show when your mouse over the table

or you can change it to always, and make the bar always show

example

<el-table
  :data="data"
  v-horizontal-scroll="'always'"
>
  <el-table-column
    fixed="left"
    label="a"
    prop="a"
  ></el-table-column>
  <el-table-column
    label="b"
    prop="b"
  ></el-table-column>
  <el-table-column
    label="c"
    prop="c"
  ></el-table-column>
  <el-table-column
    label="d"
    prop="d"
    width="1600"
  ></el-table-column>
</el-table>

Package Sidebar

Install

npm i table-horizontal-scroll

Weekly Downloads

1

Version

0.2.4

License

none

Unpacked Size

3.66 MB

Total Files

10

Last publish

Collaborators

  • feb10_zlb