el table horizontal scroll

el-table-水平滾動

讓 el-table 在底部顯示水平捲軸

支援vue2和vue3

中文文檔

如何使用

安裝

 npm install el-table-horizontal-scroll

註冊指令

 import horizontalScroll from 'el-table-horizontal-scroll'

# vue2
Vue.use(horizontalScroll)

# vue3
app.use(horizontalScroll)

或者

 import horizontalScroll from 'el-table-horizontal-scroll'

export default {
    directives: {
        horizontalScroll
    }
}

使用

 <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>

道具

您可以使用always或hover或hidden

預設為hover ，當滑鼠懸停在表格上時會顯示該欄

或者您可以將其變更為始終，並使欄始終顯示

例子

 <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>

如何改變捲軸的高度

.el-table-horizontal-scrollbarl

手動向此類添加樣式

如果你覺得懸停時捲軸太小，你可以將其添加到樣式中

. el-table-horizontal-scrollbar : hover {
  transform : scaleY ( 1.5 );
  filter : brightness ( 0.1 );
  transform : scaleY ( 1.75 ) translateY ( -10 % );
}