el table horizontal scroll

el-ตาราง-แนวนอน-เลื่อน

ให้ 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

เพิ่มสไตล์ให้กับคลาสนี้ด้วยตนเอง

หากคุณคิดว่า scroller มีขนาดเล็กมากเมื่อโฮเวอร์ คุณสามารถเพิ่มสิ่งนี้ลงในสไตล์ได้

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