项目作者: junjizhi

项目描述 :
Bootstrap Vue Table Columns Picker
高级语言: Vue
项目地址: git://github.com/junjizhi/btable-columns-picker.git
创建时间: 2021-01-07T04:19:48Z
项目社区:https://github.com/junjizhi/btable-columns-picker

开源协议:MIT License

下载


btable-columns-picker

A Bootstrap Vue Table Columns Picker component.

Screenshot

btable columns picker screenshot

Usage

  1. <template>
  2. <div>
  3. <b-button variant="primary" class="mb-2" v-b-modal.columns-config-modal>
  4. Show Columns Picker
  5. </b-button>
  6. <BTableColumnsPicker
  7. :allColumns="allColumns()"
  8. :currentColumns="columns"
  9. :id="'columns-config-modal'"
  10. @apply="applyColumnConfigs"
  11. ></BTableColumnsPicker>
  12. <b-table
  13. id="dataList"
  14. striped
  15. bordered
  16. sticky-header="800px"
  17. head-variant="light"
  18. hover
  19. :items="items"
  20. :fields="columns"
  21. >
  22. </b-table>
  23. </div>
  24. </template>
  25. <script>
  26. import { items } from './items'
  27. import BTableColumnsPicker from './BTableColumnsPicker.vue'
  28. export default {
  29. name: 'Demo',
  30. components: {
  31. BTableColumnsPicker
  32. },
  33. data() {
  34. return {
  35. items,
  36. columns: [
  37. 'id',
  38. 'label',
  39. 'summary',
  40. 'date'
  41. ]
  42. }
  43. },
  44. methods: {
  45. allColumns() {
  46. return Object.keys(items[0])
  47. },
  48. applyColumnConfigs(columns) {
  49. this.columns = columns
  50. }
  51. }
  52. }
  53. </script>

Explanations

  • The component is a special \ that we can trigger with a button.
  • The component takes in two column arrays which represent:
    • the current columns
    • all the available columns for picking
  • Modal has two built-in custom events @show and @ok that we can listen and prepare rendering the two columns selectors
  • When users click the apply button, the widget emits an @apply event and the parent component can handle it accordingly.
  • To make the component test friendly, I added :static="true" to the b-modal. This renders the modal content in-place in the DOM instead of appending it to the body. With this, the jest test can examine the content and make assertions.
  • The current UI uses two multi-select components from bootstrap. And it doesn’t support reordering the selection easily. If you need reordering, consider using the two-list vue-draggable

For more details, check out my blog.

Run demo app

  1. yarn serve