Saya mahukan lajur tetap yang betul dalam jadual bootstrap-vue Walau bagaimanapun, ciri Sticky dalam dokumen hanya ditetapkan di sebelah kiri. Adakah terdapat cara untuk membetulkan lajur kanan atau terakhir?
Saya mahu kedua-dua lajur kiri dan kanan dibetulkan pada tempatnya.
Tapak web dokumentasi: https://bootstrap-vue.org/docs/components/table#sticky-columns
<template> <div> <div class="mb-2"> <b-form-checkbox v-model="stickyHeader" inline>Sticky header</b-form-checkbox> <b-form-checkbox v-model="noCollapse" inline>No border collapse</b-form-checkbox> </div> <b-table :sticky-header="stickyHeader" :no-border-collapse="noCollapse" responsive :items="items" :fields="fields" > <!-- We are using utility class `text-nowrap` to help illustrate horizontal scrolling --> <template #head(id)="scope"> <div class="text-nowrap">Row ID</div> </template> <template #head()="scope"> <div class="text-nowrap"> Heading {{ scope.label }} </div> </template> </b-table> </div> </template> <script> export default { data() { return { stickyHeader: true, noCollapse: false, fields: [ { key: 'id', stickyColumn: true, isRowHeader: true, variant: 'primary' }, 'a', 'b', { key: 'c', stickyColumn: true, variant: 'info' }, 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l' ], items: [ { id: 1, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }, { id: 2, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }, { id: 3, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }, { id: 4, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }, { id: 5, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }, { id: 6, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }, { id: 7, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }, { id: 8, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }, { id: 9, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }, { id: 10, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 } ] } } } </script>
Ini boleh dicapai dengan mengatasi CSS bootstrap dengan beberapa CSS kami sendiri. Mula-mula pastikan lajur terakhir mempunyai pilihan
stickyColumn: true
dan sebarang pilihan lain yang anda mahu berikan:Ini akan memastikan ia mempunyai nama kelas yang boleh kita pilih dengan mudah. Gunakan gaya yang memberikan lajur melekit terakhir dalam jadual atribut
right: 0
:contoh kotak pasir